DEV Community

Cover image for Hover Button Smiley 🙂  | Hide and Reveal
Takane Ichinose
Takane Ichinose

Posted on

Hover Button Smiley 🙂 | Hide and Reveal

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

Discussion (0)