Collection of free vanilla JavaScript button code examples: animated, multiple, confirm, delete, download/upload, submit and with hover/click/hold effects. Update of April 2020 collection. 62 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Add to Card - Micro Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Click to Send
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML (Slim) / CSS (Sass) / JS
About a code
Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Click Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML (Slim) / CSS (Sass) / JS
About a code
Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
DevTo Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Wavy Hover Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: zepto.js, gsap.js
Links
Made with
- HTML / CSS (Stylus) / JS (Babel)
About a code
Bear Five Like Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
3D Pause Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Magnetic Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Add to Cart Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Pay Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Coin Flip Donate Button
A simple idea that ended up being really hard to pull off. No 3D elements or transformations are used in this experiment, only 2D elements and some clever math to give the illusion of a 3D coin with real thickness. The coin flipping is actually randomized too - if you press the button a few times you'll see.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Corsair Magnetic Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Floating Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Unsubscribe Buttons
Some ridiculous unsubscribe buttons designed to make the user feel bad for unsubscribing - not seriously though. This project leans heavily on SVG's and CSS animations and no external libraries are used.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Don't Let The Door Hit You On The Way Out
This pen features some heavy use of CSS variables and transitions on SVG elements. Animating all the figure's limbs is tedious work but it pays off when you see the finished product.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Neumorphism - Wave Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Scroll to Top Button with Vanilla JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Stylus) / JS (Babel)
About a code
Like Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Button Loading
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: boxicons.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Scroll Triggered Flip. Floating Action Button Transition
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Super Fun Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Less) / JS (Babel)
About a code
Button Interaction (GSAP)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
The Animated Share Button Using HTML, CSS & JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Like Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
Love Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Button Ripple Effect (Material Design)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Favorite Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Shiny Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Magnetic Buttons
A small set of magnetic buttons with some fun hover animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Like Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Download Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Like Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Add to Cart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Upload Progress Animation Microinteraction with GSAP
On the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a "speech bubble" above the progress bar will be shown. That "speech bubble" shows the percentage of the upload progress. The "speech bubble" will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
I ❤️ This
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css, alpine.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Bookmark
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Download Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Shuffle Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Morphing Icon Download Button
A download animation where the arrow and tray merge into a progress bar that will soon become a checkmark.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
GSAP Like Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Drag to Confirm
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
GSAP Send Button Animation
Button animation using GSAP animation library.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Send Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Paper Plane Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Soft Ripple Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: softripple.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Paper Plane Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Magnetic Hover Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, gsap.js, ionicons.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button Squish Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
3D Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Thumbs Up Confetti
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Thumbs Up Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Submit Button
An uncommon take on a submit button with a progress meter.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: anime.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Donate Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: simple-mask-money.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Awful Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: splitting.js
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
T-Shirt Cannon Button
T-Shirt cannon button with GreenSock.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js, gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Confirm Confetti Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button Bending Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Trash Button
Delete button with animated trash in vanilla JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Confetti Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Unsubscribe Button
The pitfalls of trying to unsubscribe in 2020.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: splitting.css, splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Compress Files
Simple "File-Zipping" button micro-interaction.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Grid / List Toggle Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Delete Button Animation
Simple "Delete Button" micro-interaction in HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Download & Upload Hover Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Smash To Submit Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Upload Button Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- CSS (SCSS) / JS
About a code
Button Drawing Animation
Animating pseudo elements to give the effect of drawing a button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button States Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Beer Like Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Trash Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Upload File Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button Popper
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML / CSS (SCSS) / JS
About a code
SMASH that Like Button
Favorite button, micro-Interaction in JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
Neumorphism, Heartly
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Add To Cart Animation
A cool add to cart animation with JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Download Progress Animation
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Multi Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Order Button Animation
An animated order confirmation button with HTML, CSS and little JavaScript,
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Press and Hold Button
Experiment with SVG syntax and CSS transitions to create a button allowing to open up three more options.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Processing Button
Micro-animations for a button which submits, processes and confirms the interaction.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
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!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Dynamic Moving Pill-Button Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multi-Buttons - Animals
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Multi-Button Pill
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Neumorphic Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Bounce Download Button
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Download Button SVG CSS JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Upload Buttons
Some upload animation buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Play & Pause Button
Play Button. Some playful experimentations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button Hover Effects
Some more relative simple button hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Download Interaction
Cool download interaction in HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Add / Remove Button
An add-to-button microinteraction exploration.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button - Hold to Confirm
Trying another button type where an extra confirmation is needed - for example if you publish or delete something. You will need to press the button for nearly 2 seconds to success.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Rocket Launch Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Neumorphism Soft UI Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Music Player Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- JS
About a code
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).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: zim.js
Links
Made with
- HTML / CSS / JS
About a code
Social Share Button Set
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
Particle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -