Collection of free vanilla JavaScript button code examples: animated, multiple, confirm, delete, download/upload, submit and with hover/click/hold effects.

Related Articles

  1. CSS Buttons
  2. Bootstrap Buttons
  3. jQuery Buttons
  4. React Buttons

Author

  • Jhey

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Confirm Confetti Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Bending Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Aaron Iker

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: -

Author

  • Ryan Mulligan

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

Author

  • Aaron Iker

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: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Grid / List Toggle Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

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: -

Author

  • Aaron Iker

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

Author

  • Aaron Iker

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Upload Button Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Chris Smith

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: -

Author

  • Vlad Racoare

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Beer Like Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Trash Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Upload File Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Louis Hoebregts

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Popper

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • @keyframers

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: -

Author

  • gitSushi

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Neumorphism, Heartly

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

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: -

Author

  • Gabriele Corti

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: -

Author

  • Aaron Iker

Made with

  • HTML / CSS / JS

About a code

Download Progress Animation

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Cassandra

Made with

  • HTML / CSS / JS

About a code

Multi Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Aaron Iker

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

Author

  • Gabriele Corti

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: -

Author

  • Aaron Iker

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: -

Author

  • Tibix

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: -

Author

  • Lucas Lang

Made with

  • HTML / CSS (SCSS) / JS

About a code

Dynamic Moving Pill-Button Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Multi-Buttons - Animals

Author

  • ‹MAIKO/›

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

Author

  • Lennart Hase

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

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphic Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Bounce Download Button

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Timothy Williams-Fowler

Made with

  • HTML / CSS / JS

About a code

Download Button SVG CSS JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

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

Author

  • Aaron Iker

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: -

Author

  • Milan Raring

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: -

Author

  • Aaron Iker

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: -

Author

  • Moustafa Jazzar

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Soft UI Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • MrJ

Made with

  • HTML / CSS (SCSS) / JS

About a code

Music Player Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Easy Buttons for the Canvas with ZIMjs

Author

  • ZIM

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