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
Originally Published Sep 27 2019, updated Mar 21 2021
Table of contents:
- jQuery Ripple Click/Tap Effects
- CSS Only Ripple Click/Tap Effects
jQuery Ripple Click/Tap Effects:
Waves.js is a tiny jQuery plugin that applies Android (Material Design) inspired, click/tap triggered ripple effect to any DOM elements within the document.
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.
Pseudo Ripple is a jQuery plugin for creating Material Design ripple click effects on DOM elements using CSS ::after pseudo-element.
A fancy, direction-aware, ripple-style hover effect that appears depending on the direction your mouse enters into the element.
Just another implementation of the Google Material Design ripple animation on click event, built with jQuery and CSS3 transitions.
Wave.js is a standalone JS library for creating Google Material Design styled click effects on any Html elements. The HTML elements can be buttons, icons, images, DIVs or any other inline elements.
CSS Only Ripple Click/Tap Effects:
Makes use of CSS transitions and position:absolute to create subtle ripple effects on any clickable elements as you seen in Material Design spec.