jQuery button examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Play/Pause Button Animation

Author:
Mario Duarte | December 12, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Add To Cart Animation

Author:
Simon Mayerhofer | November 8, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

FAB Animation: Share Button

Author:
Ariful Islam | November 3, 2016
Made with:
HTML (Haml) / CSS (SCSS) / JS (CoffeeScript)

About a code

Material Design animated share button with little jQuery.js

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
material-design-iconic-font.css

UI Elements - SVG Animation

Author:
Jean Paze | October 31, 2016
Made with:
HTML / CSS / JS

About a code

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

Share & Social Semicircles

Author:
Matthew Juggins | September 16, 2016
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

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

Gooey Share Button

Author:
Kirill Kiyutin | August 25, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Submit Button

Author:
Guy Waldman | August 16, 2016
Made with:
HTML / CSS (Sass) / JS

About a code

Submit button concept in jQuery.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Social Share with GSAP

Author:
Zoran Završki | April 25, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

Custom social share components with preview.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js

Social Share Buttons

Author:
magnificode | March 22, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Download Button

Author:
Rune Sejer Hoffmann | March 6, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

Download button with jumping ball animation with little jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Stay in Touch/Share Button

Author:
Alec von Barnekow | February 14, 2016
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
elegant.css, font-awesome.css, jquery-ui.js, elegant.js

Social Share

Author:
Joseph Victory | November 3, 2015
Made with:
HTML / CSS / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Play Button Animation

Author:
Robert Bue | September 1, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Hotspot/play button animation with SVG and jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js

Send Button Interaction Animation

Author:
Irem Lopsum | August 24, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

Send button with progress bar in jQuery.

Compatible browsers:
Chrome, Edge (partial), Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

8-bit Hovers

Author:
Tiffany Stoik | August 11, 2015
Made with:
HTML / CSS / JS

About a code

8-bit inspired hover effects for buttons with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Social Button Share Animation

Author:
Romswell Roswell Parian Paucar | June 30, 2015
Made with:
HTML / CSS / JS

About a code

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

Button Bubble Effect

Author:
Adrien Grsmto | June 30, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

A hover effect using the gooey tricks with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
gsap.js

SVG Particle Button

Author:
Richard Hedberg | June 11, 2015
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

jQuery 3D Button

Author:
Carlos G Notario | May 28, 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Material Design Ghost Buttons

Author:
Marco Fugaro | May 12, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Animated Submit Button

Author:
Zach Cole | April 25, 2015
Made with:
HTML / CSS / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Button Hover Effects

Author:
Kyle Brumm | November 23, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

Just some more button hover effects with jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Submit Button

Author:
auginator | August 5, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

Submit button GSAP edition.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js, tweenmax.js

Submit Button

Author:
Tamino Martinius | August 6, 2014
Made with:
HTML / CSS (Stylus) / JS (CoffeeScript)

About a code

SVG submit button with animation in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Flyaway Send Button

Author:
Adrian Del Balso | June 18, 2014
Made with:
HTML / CSS (Stylus) / JS

About a code

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

Button with Hover Effect

Author:
kaigth | January 17, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

3D Download Button with Meter Progress

Author:
Terence Devine | September 23, 2013
Made with:
HTML / CSS / JS

About a code

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨