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
Links
Made with
- HTML / CSS / JS
About a code
Floating Feedback Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
Button #1
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
jQuery Button plus-minus
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Free Fire - Congratulations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Neumorph Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
ClickButton
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS (Stylus) / JS
About a code
Animated Click Material Send Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Animated Share Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Button Hover/Click Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Button Hover/Click Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Twitter Love Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Play Button Microinteractions
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
UI Payment Approval Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Pillbox Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multi-Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multi-Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Multi Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: ionic.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multibutton
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Liquid Button
Liquid interaction button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Order Confirm Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
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
Links
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
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
Links
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: -
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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: -
Links
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
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Play/Pause Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
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
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Gooey Share Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Social Share Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
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
Links
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: -
Links
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
Links
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
Links
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: -
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
SVG Particle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
jQuery 3D Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
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
Links
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
Links
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
Links
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: -
Links
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: -