A collection of hand-picked jQuery buttons code examples. Update of October 2019 collection. 29 new examples.

  1. CSS Buttons
  2. Bootstrap Buttons
  3. HTML Buttons with JavaScript
  4. React Buttons

Creator

  • DesignersNest

Programming language

  • HTML / CSS / JS

Information a code

Table Reservation Button

Concept interaction for a restaurant table booking confirmation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • @BrawadaCom

Programming language

  • HTML / CSS (Sass) / JS

Information a code

Button Hover/Click Effects

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Akshaya Venky

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Like Button Microinteraction

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, gsap.js, textplugin.js

Creator

  • Álex S. Lérida

Programming language

  • HTML / CSS / JS

Information a code

Twitter Love Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Creator

  • Cosimo Scarpa

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

UI Button Selection Type

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.transit.js, jquery.bez.js

Creator

  • Álex S. Lérida

Programming language

  • HTML / CSS / JS

Information a code

Book Flight Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js, splittext.js

Creator

  • Cosimo Scarpa

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

UI Payment Approval Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Hisami Kurita

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Social Button Gooey Effects

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Jesse Couch

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Add to Cart Button Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Tanmay Naik

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Multibutton

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Souleste

Programming language

  • HTML / CSS / JS

Information a code

Particle Button

A sparkly particle button in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Creator

  • Yu-En W

Programming language

  • HTML / CSS / JS

Information a code

Liquid Button

Liquid interaction button.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Milan Raring

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

jQuery Button Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Button Slide

Button for an action that requires a exceptional confirmation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js

Creator

  • Kenny

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Lumos Maxima Button Hover Effect

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, fontawesome.js

Creator

  • Sammy Helali

Programming language

  • HTML / CSS / JS

Information a code

Animated Hover Button

A simple button with a hover animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Valery Alikin

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Alignment Buttons

Alignment buttons UI with GSAP and jQuery based on dribbble shots.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Creator

  • Julie Park

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Social Share Buttons

Animated share button design.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Veronica

Programming language

  • HTML / CSS / JS

Information a code

Like Button

Like button with animation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Nikhil Krishnan

Programming language

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

Information a code

Particles Button

Particles effect with click of a button.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • creme

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Button Hover Slide

Hover slide effect from left to right.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Zed Dash

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Two Buttons in One

Flat two button in one with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Veronica

Programming language

  • HTML / CSS / JS

Information a code

Activate Button

Activate button made with ::after, ::before, ::transition, animation and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Andrei

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

CSS3 + JS Download Button

Material download button animation based on dribbble shot. Used CSS3 animation, jQuery trigger, SVG + Fontawesome.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Waaark

Programming language

  • HTML / CSS / JS

Information a code

Liquid Button

Feel free to improve it to make it usable in real conditions, it might be tough to use it as it is right now.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Anton Korzhuk

Programming language

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

Information a code

Social Buttons Splash Effect

Animating SVGs with Greensock and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js, morphsvgplugin.js

Creator

  • Sasha

Programming language

  • HTML / CSS / JS

Information a code

Social Media Button

SVG filter gooey share, social media button with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Adam Kuhn

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Quirky Button

Hover and click effect for flat button in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Mario Duarte

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Play/Pause Button Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Ariful Islam

Programming language

  • HTML (Haml) / CSS (SCSS) / JS (CoffeeScript)

Information a code

FAB Animation: Share Button

Material Design animated share button with little jQuery.js

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Creator

  • Jean Paze

Programming language

  • HTML / CSS / JS

Information a code

UI Elements – SVG Animation

Animated buttons in SVG with jQuery ang GSAP Tweenmax.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js, timelinemax.js, drawsvgplugin.js

Creator

  • Matthew Juggins

Programming language

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

Information a code

Share & Social Semicircles

A small collection of social/share buttons that take the shape of a semicircle.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Kirill Kiyutin

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Gooey Share Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Guy Waldman

Programming language

  • HTML / CSS (Sass) / JS

Information a code

Submit Button

Submit button concept in jQuery.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Rune Sejer Hoffmann

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Download Button

Download button with jumping ball animation with little jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Alec von Barnekow

Programming language

  • HTML / CSS / JS

Information a code

Stay in Touch/Share Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: elegant.css, font-awesome.css, jquery-ui.js, elegant.js

Creator

  • Robert Bue

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Play Button Animation

Hotspot/play button animation with SVG and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Creator

  • Irem Lopsum

Programming language

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

Information a code

Send Button Interaction Animation

Send button with progress bar in jQuery.

Browser Support: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Tiffany Stoik

Programming language

  • HTML / CSS / JS

Information a code

8-bit Hovers

8-bit inspired hover effects for buttons with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Adrien Grsmto

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Button Bubble Effect

A hover effect using the gooey tricks with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Creator

  • Carlos G Notario

Programming language

  • HTML / CSS / JS

Information a code

jQuery 3D Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Zach Cole

Programming language

  • HTML / CSS / JS

Information a code

Animated Submit Button

A simple animated Submit button using CSS, JS and jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Kyle Brumm

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Button Hover Effects

Just some more button hover effects with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • auginator

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Submit Button

Submit button GSAP edition.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Creator

  • Tamino Martinius

Programming language

  • HTML / CSS (Stylus) / JS (CoffeeScript)

Information a code

Submit Button

SVG submit button with animation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Adrian Del Balso

Programming language

  • HTML / CSS (Stylus) / JS

Information a code

Flyaway Send Button

A basic CSS animation that makes a paper airplane fly out of this “Send” button when clicked.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • kaigth

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Button with Hover Effect

jQuery button with hover effect: bars slide from left to right on hover.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Terence Devine

Programming language

  • HTML / CSS / JS

Information a code

3D Download Button with Meter Progress

Animated download button (icon uses one i element) with 3D transition download meter progress bar.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: