Material Ripple Effect In jQuery And CSS3 - Ripple.js

File Size: 128 KB
Views Total: 2280
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Material Ripple Effect In jQuery And CSS3 - Ripple.js

Ripple.js is a tiny jQuery plugin that creates a Material Design ripple effect when you click/tap on a button or any DOM element you specify.

Powered by CSS animations and a little bit of jQuery code. Easy to implement with only CSS classes.

How to use it:

1. Install and import the Ripple.js as an ES module.

# Yarn
$ yarn add @gabrielfins/ripple-effect

$ npm i @gabrielfins/ripple-effect
import "@gabrielfins/ripple-effect";

2. Or directly load the Ripple.js (jQuery is included) into the HTML document.

<script src="dist/ripples.js"></script>

3. Add the CSS class md-ripples to the target element and the plugin will take care of the rest.

<button class="md-ripples">
  Ripple Effect

<div class="md-ripples">
  Div element is supported as well

3. Change the theme to dark or light.

<button class="md-ripples ripples-dark">
  Ripple Effect

<div class="md-ripples ripples-light">
  Div element is supported as well

4. Customize the Material ripple effect by overriding the default CSS styles as shown below.

.md-ripples {
   position: relative;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;

.ripples-light .ripple {
   background-color: #fff;

.ripples-dark .ripple {
   background-color: #000;

.ripple {
   background-color: #000;
   opacity: 0.16;
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   animation: ripple 0.3s ease-out;

@keyframes ripple {
   from {
     transform: scale(0);
   to {
     transform: scale(1);


v1.0.5 (2021-07-29)

    • Fixed bug where the event listener could be applied more than once to the DOM


  • Fixed typo


This awesome jQuery plugin is developed by gabrielfins. For more Advanced Usages, please check the demo page or visit the official website.