A collection of hand-picked jQuery button with click and hover effect code examples from Codepen and Github. Update of September 2021 collection. 14 new examples.

Related Articles

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

Author

  • Stack Findover

Made with

  • HTML / CSS / JS

About a code

Floating Feedback Button

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

Responsive: yes

Dependencies: -

Author

  • Nicolas Lanthemann

Made with

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

About a code

Button #1

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

Responsive: yes

Dependencies: -

Author

  • Nicolas Lanthemann

Made with

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

About a code

jQuery Button plus-minus

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

Responsive: no

Dependencies: -

Author

  • Mohan Khadka

Made with

  • HTML / CSS / JS

About a code

Free Fire - Congratulations

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

Responsive: yes

Dependencies: -

Author

  • TOMAZKI

Made with

  • HTML / CSS / JS

About a code

Neumorph Button

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Brett

Made with

  • HTML / CSS (SCSS) / JS

About a code

Tag Button Animation

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

Responsive: no

Dependencies: font-awesome.css, evil-icons.js

Author

  • Alice Lee

Made with

  • HTML / CSS (SCSS) / JS

About a code

ClickButton

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

Responsive: no

Dependencies: -

Author

  • Marco Kucznierz

Made with

  • HTML / CSS (Less) / JS

About a code

Expanding Contact Button

Expanding contact button and popup sendmessage.

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

Responsive: no

Dependencies: ionicons.css

Author

  • Colleen Lohr

Made with

  • HTML / CSS (Stylus) / JS

About a code

Animated Click Material Send Button

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

Responsive: yes

Dependencies: -

Author

  • Stack Findover

Made with

  • HTML / CSS / JS

About a code

Animated Share Button

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Areal Alien

Made with

  • HTML / CSS / JS

About a code

Clean Elastic Button Hover

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

Responsive: yes

Dependencies: unicons.css, jquery-ui.js, gsap.js

Author

  • @BrawadaCom

Made with

  • HTML / CSS (Sass) / JS

About a code

Button Hover/Click Effects

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

Responsive: no

Dependencies: -

Author

  • DesignersNest

Made with

  • HTML / CSS / JS

About a code

Table Reservation Button

Concept interaction for a restaurant table booking confirmation.

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

Responsive: no

Dependencies: -

Author

  • @BrawadaCom

Made with

  • HTML / CSS (Sass) / JS

About a code

Button Hover/Click Effects

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

Responsive: no

Dependencies: -

Author

  • Akshaya Venky

Made with

  • HTML / CSS (SCSS) / JS

About a code

Like Button Microinteraction

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

Responsive: no

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

Author

  • Álex S. Lérida

Made with

  • HTML / CSS / JS

About a code

Twitter Love Button

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

Responsive: yes

Dependencies: gsap.js

Author

  • DesignersNest

Made with

  • HTML / CSS / JS

About a code

Play Button Microinteractions

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

Responsive: no

Dependencies: -

Author

  • Cosimo Scarpa

Made with

  • HTML / CSS (SCSS) / JS

About a code

UI Button Selection Type

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

Responsive: no

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

Author

  • Álex S. Lérida

Made with

  • HTML / CSS / JS

About a code

Book Flight Button

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

Responsive: yes

Dependencies: gsap.js, splittext.js

Author

  • Cosimo Scarpa

Made with

  • HTML / CSS (SCSS) / JS

About a code

UI Payment Approval Button

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

Responsive: yes

Dependencies: -

Author

  • AmirthaShankari

Made with

  • HTML / CSS (SCSS) / JS

About a code

Floating Action Button Animation

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

Responsive: no

Dependencies: ionicons.js

Author

  • Hisami Kurita

Made with

  • HTML / CSS (SCSS) / JS

About a code

Social Button Gooey Effects

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Jesse Couch

Made with

  • HTML / CSS (SCSS) / JS

About a code

Add to Cart Button Animation

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Melanie

Made with

  • HTML / CSS / JS

About a code

Pillbox Buttons

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Valentin

Made with

  • HTML / CSS (SCSS) / JS

About a code

Multi-Button

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Joshua van Boxtel

Made with

  • HTML / CSS (SCSS) / JS

About a code

Multi-Buttons

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Yasaman

Made with

  • HTML / CSS / JS

About a code

Multi Button

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

Responsive: no

Dependencies: ionic.js

Author

  • Tanmay Naik

Made with

  • HTML / CSS (SCSS) / JS

About a code

Multibutton

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

Responsive: no

Dependencies: -

Author

  • Souleste

Made with

  • HTML / CSS / JS

About a code

Particle Button

A sparkly particle button in jQuery.

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

Responsive: yes

Dependencies: bootstrap.css

Author

  • Yu-En W

Made with

  • HTML / CSS / JS

About a code

Liquid Button

Liquid interaction button.

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

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

About a code

Order Confirm Animation

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

Responsive: no

Dependencies: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Back to Top with Progress Indicator

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

Responsive: yes

Dependencies: bootstrap.css, unicons.css

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Button Animation

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

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Slide

Button for an action that requires a exceptional confirmation.

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

Responsive: no

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

Author

  • Kenny

Made with

  • HTML / CSS (SCSS) / JS

About a code

Lumos Maxima Button Hover Effect

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

Responsive: no

Dependencies: jquery.js, fontawesome.js

Author

  • Gabriel Norman

Made with

  • HTML / CSS (Sass) / JS

About a code

Magnetic Button with Sound

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

Responsive: no

Dependencies: tweenmax.js

Author

  • Sammy Helali

Made with

  • HTML / CSS / JS

About a code

Animated Hover Button

A simple button with a hover animation.

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

Responsive: no

Dependencies: jquery.js

Author

  • Valery Alikin

Made with

  • HTML / CSS (SCSS) / JS

About a code

Alignment Buttons

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

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

Responsive: no

Dependencies: jquery.js, tweenmax.js

Author

  • Julie Park

Made with

  • HTML / CSS (SCSS) / JS

About a code

Social Share Buttons

Animated share button design.

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

Responsive: no

Dependencies: -

Author

  • Veronica

Made with

  • HTML / CSS / JS

About a code

Like Button

Like button with animation in jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Nikhil Krishnan

Made with

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

About a code

Particles Button

Particles effect with click of a button.

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

Responsive: no

Dependencies: jquery.js

Author

  • creme

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Hover Slide

Hover slide effect from left to right.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Zed Dash

Made with

  • HTML / CSS (SCSS) / JS

About a code

Two Buttons in One

Flat two button in one with jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Veronica

Made with

  • HTML / CSS / JS

About a code

Activate Button

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

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

Responsive: no

Dependencies: jquery.js

Author

  • James Bosworth

Made with

  • HTML / CSS (SCSS) / JS

About a code

Perspective Button Click with Particles

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

Responsive: no

Dependencies: tilt.jquery.js

Author

  • Andrei

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS3 + JS Download Button

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

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

Responsive: no

Dependencies: jquery.js

Author

  • Waaark

Made with

  • HTML / CSS / JS

About 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.

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

Responsive: no

Dependencies: -

Author

  • Anton Korzhuk

Made with

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

About a code

Social Buttons Splash Effect

Animating SVGs with Greensock and jQuery.

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

Responsive: no

Dependencies: tweenmax.js, morphsvgplugin.js

Author

  • Sasha

Made with

  • HTML / CSS / JS

About a code

Social Media Button

SVG filter gooey share, social media button with jQuery.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS) / JS

About a code

Quirky Button

Hover and click effect for flat button in jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Mario Duarte

Made with

  • HTML / CSS (SCSS) / JS

About a code

Play/Pause Button Animation

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

Responsive: no

Dependencies: -

Author

  • Simon Mayerhofer

Made with

  • HTML / CSS (SCSS) / JS

About a code

Add To Cart Animation

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Ariful Islam

Made with

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

About a code

FAB Animation: Share Button

Material Design animated share button with little jQuery.js

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

Responsive: yes

Dependencies: material-design-iconic-font.css

Author

  • Jean Paze

Made with

  • HTML / CSS / JS

About a code

UI Elements - SVG Animation

Animated buttons in SVG with jQuery ang GSAP Tweenmax.

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

Responsive: no

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

Author

  • Matthew Juggins

Made with

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

About a code

Share & Social Semicircles

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

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Kirill Kiyutin

Made with

  • HTML / CSS (SCSS) / JS

About a code

Gooey Share Button

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

Responsive: yes

Dependencies: -

Author

  • Guy Waldman

Made with

  • HTML / CSS (Sass) / JS

About a code

Submit Button

Submit button concept in jQuery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Zoran Završki

Made with

  • HTML / CSS (SCSS) / JS

About a code

Social Share with GSAP

Custom social share components with preview.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • magnificode

Made with

  • HTML / CSS (SCSS) / JS

About a code

Social Share Buttons

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

Responsive: no

Dependencies: -

Author

  • Rune Sejer Hoffmann

Made with

  • HTML / CSS (SCSS) / JS

About a code

Download Button

Download button with jumping ball animation with little jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Alec von Barnekow

Made with

  • HTML / CSS / JS

About a code

Stay in Touch/Share Button

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

Responsive: yes

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

Author

  • Joseph Victory

Made with

  • HTML / CSS / JS

About a code

Social Share

A social share widget built with HTML, CSS and jQuery.

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

Responsive: yes

Dependencies: -

Author

  • Robert Bue

Made with

  • HTML / CSS (SCSS) / JS

About a code

Play Button Animation

Hotspot/play button animation with SVG and jQuery.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Irem Lopsum

Made with

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

About a code

Send Button Interaction Animation

Send button with progress bar in jQuery.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Tiffany Stoik

Made with

  • HTML / CSS / JS

About a code

8-bit Hovers

8-bit inspired hover effects for buttons with jQuery.

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

Responsive: yes

Dependencies: -

Author

  • Romswell Roswell Parian Paucar

Made with

  • HTML / CSS / JS

About a code

Social Button Share Animation

Demo social button animation with actions that start with a click in the icon that is show in the firt screen. a simple animations very nice for the browser.

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

Responsive: yes

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

Author

  • Adrien Grsmto

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Bubble Effect

A hover effect using the gooey tricks with jQuery.

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

Responsive: no

Dependencies: gsap.js

Author

  • Richard Hedberg

Made with

  • HTML / CSS (SCSS) / JS

About a code

SVG Particle Button

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

Responsive: no

Dependencies: -

Author

  • Carlos G Notario

Made with

  • HTML / CSS / JS

About a code

jQuery 3D Button

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

Responsive: no

Dependencies: -

Author

  • Marco Fugaro

Made with

  • HTML / CSS (SCSS) / JS

About a code

Material Design Ghost Buttons

Comparison with centered ripple effect, and mouse relative ripple effect.

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

Responsive: no

Dependencies: -

Author

  • Zach Cole

Made with

  • HTML / CSS / JS

About a code

Animated Submit Button

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

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

Responsive: no

Dependencies: jquery.js

Author

  • Kyle Brumm

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Hover Effects

Just some more button hover effects with jQuery.

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

Responsive: yes

Dependencies: -

Author

  • auginator

Made with

  • HTML / CSS (SCSS) / JS

About a code

Submit Button

Submit button GSAP edition.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Author

  • Tamino Martinius

Made with

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

About a code

Submit Button

SVG submit button with animation in jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Adrian Del Balso

Made with

  • HTML / CSS (Stylus) / JS

About a code

Flyaway Send Button

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

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

Responsive: no

Dependencies: jquery.js

Author

  • kaigth

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button with Hover Effect

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

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

Responsive: no

Dependencies: -

Author

  • Terence Devine

Made with

  • HTML / CSS / JS

About a code

3D Download Button with Meter Progress

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

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

Responsive: no

Dependencies: -