55+ JavaScript Buttons - Free Code + Demos
Collection of 55+ JavaScript Buttons. All items are 100% free and open-source. The list also includes animated javascript buttons, multiple, confirm, delete, download/upload, and submit.
1. T-Shirt Cannon Button 🚀
T-Shirt cannon button with GreenSock. Not sure why, but the tip of the cannon gets cut off in Chrome sometimes which isn't ideal. Enjoy!
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: April 10, 2020
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: greensock, button, t-shirt, folding, animation
2. Confirm Confetti Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: April 8, 2020
Made with: HTML, SCSS, JS
Tags: confetti, gsap, confirm, button, physics
3. Button Bending Hover
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: April 3, 2020
Made with: HTML, SCSS, JS
Tags: button, bend, hover, animation, svg
4. Trash Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: March 30, 2020
Made with: HTML, SCSS, JS
Tags: delete, trash, remove, button, animation
5. Unsubscribe Button
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: March 23, 2020
Made with: HTML, SCSS, JS
Tags: button, css, unsubscribe, css-animation
6. Compress Files
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: March 20, 2020
Made with: HTML, SCSS, JS
7. Grid / List Toggle
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: March 18, 2020
Made with: HTML, SCSS, JS
8. Delete Button Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: March 15, 2020
Made with: HTML, SCSS, JS
Tags: delete, trash, button, animation, remove
9. Download & Upload Hover Animations
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: March 12, 2020
Made with: HTML, SCSS, JS
10. Smash To Submit Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: March 12, 2020
Made with: HTML, SCSS, JS
11. Upload Button Hover
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: March 8, 2020
Made with: HTML, SCSS, JS
12. Button Drawing Animation
Animating pseudo elements to give the effect of drawing a button.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: March 5, 2020
Made with: SCSS, JS
Tags: animation, drawing, sketch
13. Button States Animations
Author: Vlad Racoare (vladracoare)
Links: Source Code / Demo
Created on: March 2, 2020
Made with: HTML, SCSS, JS
14. Beer Like Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: February 19, 2020
Made with: HTML, SCSS, JS
15. Trash Button Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: February 19, 2020
Made with: HTML, SCSS, JS
16. Upload File
Author: alphardex (alphardex)
Links: Source Code / Demo, Dribbble Shot
Created on: February 16, 2020
Made with: HTML, SCSS, TypeScript
Tags: upload, progress-bar
17. Button Popper - Final Demo
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: February 15, 2020
Made with: HTML, SCSS, JS
18. Smash That Like Button
Author: @keyframers (keyframers)
Links: Source Code / Demo, Dribbble Shot, Youtube Video, Cdpn.io, Github.com, Tympanus.net, Youtu.be, Youtube.com, Keyframe.rs, Twitter.com, Patreon.com
Created on: February 12, 2020
Made with: HTML, SCSS, JS
Tags: keyframers, heart, like, animation, button
19. Neumorphism, Heartly
Author: gitSushi (gitsushi)
Links: Source Code / Demo
Created on: January 27, 2020
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
20. Add To Cart Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble.com
Created on: January 23, 2020
Made with: HTML, SCSS, JS
Tags: shopping, cart, button, success, complete
21. Material Buttons
Practice with custom properties, clip-path, pseudo elements and CSS as a whole to create a series of buttons inspired by the material UI. With just enough JavaScript to make mouse events extra special. Links Material UI Buttons. The page has actually an interactive demo with plenty of f...Read More
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: January 23, 2020
Made with: HTML, CSS, JS
Tags: material ui, button, custom property, pseudo-element, clip-path
22. Download Progress Animation
Author: Aaron Iker (aaroniker)
Created on: January 20, 2020
Made with: HTML, SCSS, JS
Tags: gsap, download, svg, animation, ui
23. Multi-buttons
Created for the January 2020 Multi-buttons CodePen Challenge
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: January 8, 2020
Made with: HTML, CSS
Tags: multi-button, cpc-multi-button, codepenchallenge, css-animation, flex-grow animation
24. Order Button Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: January 16, 2020
Made with: HTML, SCSS, JS
Tags: truck, gsap, confirm, button, drive
25. Press And Hold
Experiment with SVG syntax and CSS transitions to create a button allowing to open up three more options. With time. Links Original design inspiring the project, from Voicu Apostol.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo, Dribbble Shot
Created on: January 12, 2020
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-multi-button, svg, transition, custom properties
26. Processing Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: January 9, 2020
Made with: HTML, SCSS, JS
Tags: processing, button, loading, load, submit
27. Button + Canvas = Awesome
Using the Canvas Element to bring your Button Hover Effects to a new Level! These are just a few examples using the same approach with particles, now imagine the endless possibilities!
Author: Tibix (Tibixx)
Links: Source Code / Demo
Created on: January 9, 2020
Made with: HTML, SCSS, JS
Tags: button, canvas, glow, animation, particles
28. Dynamic Moving Pill-Button Background
Author: Lucas Lang (llang8)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML, SCSS, JS
Tags: cpc-multi-button, codepenchallenge
29. Multi Buttons Animals
My response to Codepen's Multi-Buttons challenge, had some fun with this one and our fellow animal friends (: cpc-multi-button #codepenchallenge
Author: ‹MAIKO/› (Maiko_SSB)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML, SCSS, JS
Tags: cpc-multi-button, codepenchallenge
30. Multi Button Pill
My attempt at the CodePen multi-button challenge, using icons and tooltips in a pill so hopefully easy to swallow, haha.
Author: Lennart Hase (motorlatitude)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML, SCSS, Babel
Tags: cpc-multi-button, codepenchallenge, cpc, buttons
31. Neumorphic Buttons
Author: Sikriti Dakua (dev_loop)
Links: Source Code / Demo, Dribbble Shot
Created on: December 30, 2019
Made with: HTML, SCSS, JS
Tags: neumorphic
32. Bounce Download Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: December 22, 2019
Made with: HTML, SCSS, JS
Tags: button, download, bounce, svg, gsap
33. Download Button SVG CSS JS
Author: Timothy Williams-Fowler (timwf)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS, JS
34. Upload Buttons
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: December 11, 2019
Made with: HTML, SCSS, JS
Tags: button, upload, animation, gsap, svg
35. Play & Pause Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: December 4, 2019
Made with: HTML, SCSS, JS
Tags: play, pause, button, animation, motion
36. Download Interaction
Cool download interaction
Author: Milan Raring (milanraring)
Links: Source Code / Demo
Created on: December 2, 2019
Made with: HTML, SCSS, JS
Tags: download, animation, button, arrow, check
37. Add / Remove Button
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble.com
Created on: December 2, 2019
Made with: HTML, SCSS, JS
Tags: add, remove, button, morph, micro interaction
38. Neumorphism Soft UI Buttons
Author: Moustafa Jazzar (MoustafaJazzar)
Links: Source Code / Demo
Created on: November 11, 2019
Made with: HTML, SCSS, JS
Tags: neumorphism, button, soft, ui, play
39. Music Player Button
Author: MrJ (MrJoker612)
Links: Source Code / Demo
Created on: October 4, 2019
Made with: HTML, SCSS, JS
40. Easy Buttons For The Canvas With ZIMjs
Easy buttons with rollovers, backings, icons, toggle and wait states, patterns, tabs and more! ZIM provides JavaScript conveniences, components and controls for the Canvas and is powered by CreateJS with its solid Bitmap Object Model (BOM). Code Creativity with ZIM!
Author: ZIM (zimjs)
Links: Source Code / Demo
Created on: August 9, 2018
Made with: JS
Tags: zim, zimjs, createjs, canvas, buttons
41. Gaming Button With Hover Effect
A button I built for a game website, bars slide from left to right on hover.
Author: kaigth (kaigth)
Links: Source Code / Demo
Created on: January 16, 2014
Made with: HTML, SCSS, JS
Tags: button, gaming, hover, cool, game
42. Liquid Button
Author: Tobias Reich (electerious)
Links: Source Code / Demo
Created on: October 19, 2019
Made with: HTML, SCSS, Babel
Tags: canvas, animation, interactive, link, hover
43. Animated Ghost Button
Author: Cameron (numerical)
Links: Source Code / Demo
Created on: December 18, 2014
Made with: HTML, CSS, JS
Tags: ghost, button, outline, transparent, animated
44. Vanilla JavaScript - Simon Says
Author: Fitri Ali (fitri)
Links: Source Code / Demo
Created on: April 25, 2017
Made with: HTML, CSS, JS
45. Change Button Text With Vanilla JS
Simple demonstration on how to change button text without restoring to jQuery.
Author: Michael Trythall (mtrythall)
Links: Source Code / Demo
Created on: February 23, 2014
Made with: HTML, SCSS, JS
Tags: events, vanilla-js, button, hover, mouseover
46. Button Interaction (Made With GSAP)
Author: Faria Begum Riya (faria09)
Links: Source Code / Demo
Created on: August 28, 2020
Made with: HTML, Less, Babel
Tags: greensock, button, microinteraction
47. Inclusive Toggles Using <button> And The Aria-checked Attribute
Toggles that are inclusive and accessible using the aria-checked attribute.
Author: HÃ¥vard Brynjulfsen (havardob)
Links: Source Code / Demo
Created on: August 20, 2020
Made with: HTML, SCSS, JS
Tags: toggle, button, input, form, settings
48. Change The Background
Change the background colour by clicking on the button!
Author: Arianha Bayley (Ari_anha)
Links: Source Code / Demo
Created on: August 23, 2020
Made with: HTML, CSS, JS
Tags: eventhandler, button, javascript
49. Play Button (Yellow, Pulse Effect)
Play Button with pulse effect
Author: Rojo Salas (rojo_salas)
Links: Source Code / Demo
Created on: August 14, 2020
Made with: HTML, CSS, JS
Tags: play, button, pulse, effect, rojo
50. Gatito En La Ventana.
Author: Isa Pulsatilla (isa-pulsatilla)
Links: Source Code / Demo
Created on: August 24, 2020
Made with: HTML, CSS, JS
Tags: button, javascript, cat, window, stars
NEW 🔥 Idea to UI/UX Design In Seconds With AI 🔥
👉 Click to try it for free: UXCanvas.ai
More Awesome Lists:
Share: