DEV Community

loading...
Cover image for Amazing Button Animation Using HTML & JS

Amazing Button Animation Using HTML & JS

Nikhil Bobade
I am Frontend Developer, currently living in Mumbai, India. My interests range from technology to design. Currently learning MEAN and Data Structure.
・1 min read

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!

Discussion (7)

Collapse
killshot13 profile image
Michael R.

Not going to lie this is pretty tight. 👍

Collapse
nikhil27b profile image
Nikhil Bobade Author

Thanks Follow on Instagram for more content 😊

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 Author

yes its very easy

Collapse
kozakrisz profile image
Krisztian Kecskes

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

Collapse
nikhil27b profile image
Nikhil Bobade Author

Thanks 😊

Collapse
cristoferk profile image
CristoferK

nice!