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