CodePenChallenge Microinteractions Hide and Reveal
Description
This is just a simple interaction, when the user hovered on the button, the smiley icon will show.
The face of the smiley icon will follow the mouse pointer relative to the button's position.
I used "Single Page Vue Component" to render the element, styles, as well as the functionalities of the button.
I made the style of the button a little bit "glossy" by adding a dark-colored inset box-shadow, and also the white thing at the top left of the button. I created it by drawing an ellipse, then blurred it out by using filter.
Note
While smartphone devices doesn't have "hover" or "mouseover" event by default, the effect may still be seen by using the "touch" event on the button.
Resources
Javascript framework: VueJS
Fonts: Fredoka One
Top comments (0)