80 JavaScript Buttons Animation
Are you looking to add some flair and interactivity to your website? Look no further than these hand-picked HTML, CSS and JavaScript button animation examples from CodePen.
With a touch of creativity and the freedom to customize, you can seamlessly integrate these captivating button animations into your website. The best part? This carefully curated collection of JavaScript button animation examples is absolutely free! Let your imagination run wild as you transform your static buttons into dynamic elements that grab your visitors’ attention.
1. Sparkle Button
Made with: HTML / CSS / JavaScript (Babel)
Created by Jhey PRO, Created At March 23, 2023
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Safari
2. Confirm Confetti Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At April 9, 2020
Responsive : yes
Dependencies : gsap.js, Physics2DPlugin.js
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
3. Confetti Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Cooper Goeke, Created At March 24, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
4. Add To Cart Button Animation
Made with: HTML / CSS / JavaScript
Created by MinzCode, Created At July 21, 2020
Responsive : yes
Dependencies : font-awesome.css 5.14.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
5. Coin Flip Donate Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Cooper Goeke, Created At October 28, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
6. Magnetic Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Milan Raring, Created At December 22, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
7. Bear Five Like Button
Made with: HTML / CSS (Stylus) / JavaScript (Babel)
Created by Jhey PRO, Created At February 9, 2021
Responsive : yes
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
8. Add to cart button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At November 20, 2020
Responsive : yes
Dependencies : gsap.js 3.11.5
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
9. Click to send
Made with: HTML / CSS / JavaScript
Created by Dilum Sanjaya PRO, Created At April 9, 2021
Responsive : yes
Dependencies : gsap.js 3.11.5
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
10. Bouncy hover Effect
Made with: HTML / CSS / JavaScript
Created by Kevin Canlas PRO, Created At January 12, 2023
Responsive : yes
Dependencies : gsap.js 3.11.5, font-awesome.css 6.2.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
11. Add to cart
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At July 21, 2020
Responsive : yes
Dependencies : gsap.js 3.4.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
12. Download Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Milan Raring PRO, Created At April 13, 2021
Responsive : yes
Dependencies : gsap.js 3.11.5
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
13. Send Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Milan Raring PRO, Created At July 5, 2020
Responsive : yes
Dependencies : gsap.js 3.3.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
14. Button with glow & particles
Made with: HTML / CSS (SCSS)
Created by LukyVJ PRO, Created At April 6, 2023
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
15. Delete Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 15, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
16. Gooey Buttons
Made with: HTML / CSS (SCSS) / JavaScript
Created by Adam Kuhn PRO, Created At March 8, 2023
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
17. Send Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Shahid Shaikh, Created At June 6, 2020
Responsive : yes
Dependencies : gsap.js 3.3.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
18. Particle Button Animation
Made with: HTML / CSS / JavaScript (Babel)
Created by Kasper De Bruyne PRO, Created At September 24, 2019
Responsive : no
Dependencies : gsap.js 2.1.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
19. Donate Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At April 20, 2020
Responsive : yes
Dependencies : simple-mask-money.js 3.0.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
20. Button Animation
Made with: HTML / CSS (SCSS)
Created by Kitsune, Created At June 23, 2016
Responsive : yes
Dependencies : jquery.js 2.2.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
21. Log Out Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Cooper Goeke, Created At September 21, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
22. Upload-Button Animation
Made with: HTML / CSS (Less) / JavaScript
Created by Aaron Iker PRO, Created At November 10, 2016
Responsive : no
Dependencies : jquery.js 3.1.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
23. Processing Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At January 10, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
24. Toggle Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At September 20, 2018
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
25. Download Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At July 10, 2019
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
26. Thumbs up button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At April 23, 2020
Responsive : no
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
27. Paper Plane Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At June 3, 2020
Responsive : yes
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
28. Animated Button
Made with: HTML / CSS / JavaScript
Created by Zane Wesley, Created At April 9, 2021
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
29. Particle Button
Made with: HTML / CSS / JavaScript
Created by Timo Hausmann, Created At April 26, 2013
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
30. Glow Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At November 9, 2022
Responsive : yes
Dependencies : gsap.js 3.11.5, chroma.js 2.4.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
31. Button
Made with: HTML (Slim) / CSS (Sass) / JavaScript
Created by @BrawadaCom, Created At April 5, 2021
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
32. ⭐️ Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At September 17, 2021
Responsive : yes
Dependencies : gsap.js 3.11.5
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
33. Pay Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At September 10, 2021
Responsive : yes
Dependencies : gsap.js 3.11.5, inter.css 3.19.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
34. Heart Fold Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 2, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
35. Activate Button animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 17, 2018
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
36. Drag to confirm
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At June 8, 2020
Responsive : no
Dependencies : gsap.js 3.2.6, draggable.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
37. 3D Pause Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Håvard Brynjulfsen PRO, Created At January 12, 2021
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
38. Corsair Magnetic Button
Made with: HTML / CSS / JavaScript
Created by Dennis, Created At October 8, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
39. Like Button (🍏 Event Hashflag)
Made with: HTML / CSS (Stylus) / JavaScript (babel)
Created by Jhey PRO, Created At September 17, 2020
Responsive : no
Dependencies : gsap.js 3.5.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
40. Thumbs up confetti
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At April 28, 2020
Responsive : yes
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
41. Download button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At July 2, 2020
Responsive : yes
Dependencies : gsap.js 3.3.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
42. Menu Button Interaction
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aybüke Ceylan PRO, Created At April 10, 2021
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
43. Glowy Canvas Button? 🤙
Made with: HTML / CSS / JavaScript (Babel)
Created by Jhey PRO, Created At May 11, 2023
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
44. Buy Now Button Animation
Made with: HTML / CSS / JavaScript
Created by Hebert Lopes Ruiz, Created At September 15, 2016
Responsive : no
Dependencies : jquery.js 3.3.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
45. Trash button animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At February 19, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
46. LottiFiles Bookmark Button
Made with: HTML / CSS (SCSS) / JavaScript (Babel)
Created by Unleashed Design PRO, Created At June 25, 2023
Responsive : no
Dependencies : lottie.js 5.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
47. Bookmark
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At July 9, 2020
Responsive : yes
Dependencies : gsap.js 3.4.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
48. Add To Cart Button Animation
Made with: HTML / CSS / JavaScript
Created by The Villain, Created At July 1, 2023
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
49. Publish
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At October 16, 2020
Responsive : yes
Dependencies : gsap.js 3.4.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
50. Button squish animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At May 21, 2020
Responsive : yes
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
51. Like Button
Made with: HTML / CSS (SCSS) / JavaScript (Babel)
Created by Tamino Martinius PRO, Created At July 31, 2020
Responsive : yes
Dependencies : gsap.js 3.4.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
52. High Five Button
Made with: HTML / CSS (SCSS) / JavaScript (Babel)
Created by Aaron Iker PRO, Created At April 1, 2022
Responsive : yes
Dependencies : gsap.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
53. BlackJoy Like Animation
Made with: HTML / CSS (SCSS) / JavaScript (TypeScript)
Created by Tamino Martinius PRO, Created At August 5, 2020
Responsive : yes
Dependencies : gsap.js 3.4.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
54. T-Shirt Cannon Button 🚀
Made with: HTML (Pug) / CSS (Stylus) / JavaScript (Babel)
Created by Jhey PRO, Created At April 10, 2020
Responsive : no
Dependencies : gsap.js 3.2.6, splitting.js 1.0.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
55. Sketch Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 8, 2022
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
56. Paper plane button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At May 29, 2020
Responsive : yes
Dependencies : gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
57. Download Button Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At October 1, 2019
Responsive : no
Dependencies : gsap.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
58. Upload buttons
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 12, 2019
Responsive : no
Dependencies : gsap.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
59. Download Animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At August 5, 2020
Responsive : yes
Dependencies : gsap.js 3.4.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
60. Download & Upload Hover Animations
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 12, 2020
Responsive : no
Dependencies : gsap.js 3.1.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
61. Order confirm animation
Made with: HTML (Pug) / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At September 8, 2019
Responsive : no
Dependencies : jquery.js 3.4.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
62. Smash to submit button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 12, 2020
Responsive : no
Dependencies : gsap.js 3.2.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
63. Wavy Upload Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At May 6, 2022
Responsive : no
Dependencies : gsap.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
64. Download progress animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At January 21, 2020
Responsive : no
Dependencies : gsap.js
Compatible browsers : Chrome, Edge, Opera, Safari
65. Continue Application Hover
Made with: HTML / CSS (SCSS)
Created by Aaron Iker PRO, Created At February 17, 2020
Responsive : no
Dependencies : inter.css
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
66. Play & Pause Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 5, 2019
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
67. Trash button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 30, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
68. Favorite Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At August 13, 2020
Responsive : no
Dependencies : gsap.js 3.4.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
69. Grid / List toggle
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At March 18, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
70. Upload File
Made with: HTML / CSS (SCSS) / JavaScript (TypeScript)
Created by alphardex, Created At February 16, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
71. Button Hover Effects (V2)
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 3, 2019
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
72. Button Hover Effects (V1)
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At October 11, 2019
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
73. 3D Button
Made with: HTML / CSS (SCSS) / JavaScript (Babel)
Created by Robin Delaporte, Created At May 12, 2020
Responsive : no
Dependencies : three.js, gsap.js 3.2.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
74. 3D Explore Menu (Burger)
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 3, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
75. Playful button hover effects
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At January 24, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
76. Hold to Confirm (V2)
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 1, 2019
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
77. Bounce download button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At December 23, 2019
Responsive : yes
Dependencies : gsap.js 3.12.2
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
78. Download Button
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At November 2, 2020
Responsive : yes
Dependencies : gsap.js 3.5.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
79. Order button animation
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At January 17, 2020
Responsive : yes
Dependencies : gsap.js 3.0.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
80. Hold to confirm (V1)
Made with: HTML / CSS (SCSS) / JavaScript
Created by Aaron Iker PRO, Created At November 22, 2019
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari