DEV Community

Cover image for Amazing Button Animation Using HTML & JS
Nikhil Bobade
Nikhil Bobade

Posted on

Amazing Button Animation Using HTML & JS

Hello Guys,

Today I created an Amazing Button Animation Using HTML & JS. In this button animation, I am using only HTML CSS and Js for animation.

Card Fill Hover Effect :

This is a simple HTML I am using for buttons. For animation effect I am using span tag for design button and with using JavaScript and button click only use of setTimeout function this function is only for add innerHTML <div class="loading-1">Sending</div> to animate the button.

I hope to find this useful in a post like and save this post also comments about your thoughts and new ideas for a post. For more content follow me on Instagram @developer_nikhil27.

Thank you!

Top comments (7)

Collapse
 
killshot13 profile image
Michael R. •

Not going to lie this is pretty tight. 👍

Collapse
 
nikhil27b profile image
Nikhil Bobade •

Thanks Follow on Instagram for more content 😊

Collapse
 
kozakrisz profile image
Krisztian Kecskes •

I don"t like the animation but the technical solution is nice. ✌🏼

Collapse
 
nikhil27b profile image
Nikhil Bobade •

Thanks 😊

Collapse
 
the_riz profile image
Rich Winter •

I'd consider briefly changing the background color to green on "Done". Makes it more noticeable.

Collapse
 
nikhil27b profile image
Nikhil Bobade •

yes its very easy

Collapse
 
cristoferk profile image
CristoferK •

nice!