CodePenChallenge Microinteractions Hide and Reveal
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
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.
Fonts: Fredoka One