10 Best Material Ripple Click/Tap Effects In JavaScript/CSS (2023 Update)
What Is Ripple Click/Tap Effect
Ripple Click/Tap Effect is a user interaction concept introduced in Google Android & Material Design that displays an 'ink ripple' interaction effect when the user clicks/taps an interactive element such as links, action buttons, toggle elements, etc.
The Best Ripple Click/Tap Effect
Tired of looking for a solution to create the interaction effect on your Material Design styled web project? This is the 10 best JavaScript and/or Pure CSS solutions to implement the ripple click/tap effect on your webpage in a quick way. Have fun!
Originally Published Sep 27 2019, updated Feb 17 2023
Table of contents:
- jQuery Ripple Click/Tap Effects
- Vanilla JavaScript Ripple Click/Tap Effects
- CSS Only Ripple Click/Tap Effects
jQuery Ripple Click/Tap Effects:
Android L Style Click/Touch Effects with jQuery and CSS3 - rippler
Create SVG based wave/ripple effects on your buttons (or any other Html elements) when clicked or tapped on.
jQuery Plugin For Customizable Material Design Ripple Effect - legitRipple.js
A jQuery plugin used to create adaptive, smooth, draggable and highly customizable ripple click effect using CSS3 transitions. Inspired from the Google Material Design's Responsive interaction spec and works on any html elements.
Customizable Material Ripple Click Animations with jQuery - Rippleria
A super lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations. Works with any DOM elements like buttons, images, divs, etc.
jQuery Plugin To Apply Ripple Effects To Elements - Ripple
A minimalist jQuery plugin used to apply Android L & Material Design concepted ripple effects to Html elements (e.g. UI buttons) when clicked or touched. Based on CSS3 transform, animation, border-radius, keyframes and opacity properties.
Apply Click/Tap Ripple Effects To Any DOM Elements - ripple-effect
A minimal and dead simple to use jQuery plugin which implements the Android-style click/tap ripple effect on any DOM elements as defined by Material Design Guidelines.
Vanilla JavaScript Ripple Click/Tap Effects:
Material Design Ripple Effects In Vanilla JavaScript – rippleJS
A pure vanilla JavaScript solution to create Material Design inspired interactive ripple click effects on any DOM element.
Google Material Button Ripple Effects On Click – RippleButtons.js
A standalone Javascript library to create CSS3 based ‘ripple’ animations with mouse interaction when you click on an action button.
Material Design Ripple Click Effect In Vanilla JavaScript – ripple.js
Just another JavaScript library that applies an animated, Material Design inspired ripple effect to a clickable element using pure JavaScript.
Minimalist Ripple Effect On Click And Tap – ripple.js
Yet another JavaScript library which implements the Material Ripple effect on any elements you specify.
CSS Only Ripple Click/Tap Effects:
Material Design Ripple Click Effect With Pure CSS
Makes use of CSS transitions and position:absolute to create subtle ripple effects on any clickable elements as you seen in Material Design spec.
Conclusion:
Ripple click effects are successful when they provide a sense of user feedback in response to an action. It’s very easy to add them to any interface and they don’t necessarily need to be used just with Material Design.
Here they are, the 10 ripple click effects that we have chosen through our research. All of these effects are very well designed, easy to use and customize, and they all work with modern browsers.
If you have any other material design ripple effects that you would like to share with us, or if you know of some other good articles about them, please let us know in the comments section below!
Seeking more jQuery plugins or JavaScript libraries to create awesome Ripple Click/Tap Effect on the web & mobile? See jQuery Ripple Click/Tap Effect and JavaScript Ripple Click/Tap Effect sections for more details.
