A collection of hand-picked jQuery button code examples.

20 jQuery Buttons

A collection of hand-picked jQuery buttons code examples.

Related Articles

  1. CSS Buttons
  2. React Buttons

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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

back to top