Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activated. Won’t you be glad to learn how to make one of those animations? now in this demo, we will be learning to make a website Share button animation that animates on mouse hover.
A glimpse of the Main outcome:
Animated Pill Shaped Button
Make an HTML file.
Make a div with the choice of your name as a selector class, here we have used btn_wrap.
Make the outer overlay using a span tag, this will be the label of the pill.
Make a div with the class name of your choice to put the icons in.
Put the icons inside i element, you can put as many icons as you want, just don’t forget to increase the width of the pill.
Style the span, i, and container selectors accordingly.
Animate the btn_wrap while on hover using the transform property.
Add the transition delay on each child icon for smooth revelation.
HTML: Here we will create a structure according to our approach and make it a wrap as a share button on multiple social media platforms.
Output: As you can see when the mouse hovers over the Share button pill the icons are revealed, here the example is for demo purposes, you can make the icons responsive and redirect accordingly or something creative.
Please Login to comment...