10 Best Material Ripple Click/Tap Effects In JavaScript/CSS (2021 Update)

by jQueryScript,

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 Mar 21 2021

Table of contents:

jQuery Ripple Click/Tap Effects:

Configurable Ripple Effect On Click/Tap - jQuery Waves.js

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.

Configurable Ripple Effect On Click/Tap - jQuery Waves.js

[Demo] [Download]


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.

Apply Click/Tap Ripple Effects To Any DOM Elements - ripple-effect

[Demo] [Download]


Modern Material Ripple Plugin With jQuery And CSS3 - Pseudo Ripple

Pseudo Ripple is a jQuery plugin for creating Material Design ripple click effects on DOM elements using CSS ::after pseudo-element.

Modern Material Ripple Plugin With jQuery And CSS3 - Pseudo Ripple

[Demo] [Download]


Direction-aware Ripple Hover Effect In jQuery And CSS3

A fancy, direction-aware, ripple-style hover effect that appears depending on the direction your mouse enters into the element.

Direction-aware Ripple Hover Effect In jQuery And CSS3

[Demo] [Download]


Material Ripple Animation On Click - jQuery rippler.js

Just another implementation of the Google Material Design ripple animation on click event, built with jQuery and CSS3 transitions.

Material Ripple Animation On Click - jQuery rippler.js

[Demo] [Download]


Vanilla JavaScript Ripple Click/Tap Effects:

Material Design Ripple Effect In Pure JavaScript

A dead simple, pure JavaScript/CSS implementation of the customizable Material Design ripple effects.

Material Design Ripple Effect In Pure JavaScript

[Demo] [Download]


Android L Ripple Click Effect with Javascript and CSS3

Just another approach to create a famous Android L & Google Material Design styled ripple effect using Javascript and CSS3. 

Android L Ripple Click Effect with Javascript and CSS3

[Demo] [Download]


Google Material Design Ripple Effects with Wave.js

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.

Google Material Design Ripple Effects with Wave.js

[Demo] [Download]


Material Ripple Effect In Vanilla JavaScript – Ripplet.js

Ripplet.js is a lightweight vanilla JavaScript library which applies Material Design inspired ripple effects to any element using CSS properties. Written in Typescript.

Material Design Hover & Click Effects with jQuery and CSS3

[Demo] [Download]


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.

Material Design Ripple Effect In Pure JavaScript

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Ripple Click/Tap Effect on the web & mobile? Check out the jQuery Ripple Click/Tap Effect and JavaScript Ripple Click/Tap Effect sections.

See Also: