Ripple Effect Based on Material Design In jQuery

Ripple effect is based on a material design made with CSS, JavaScript, jQuery selectors, and DOM manipulation for a very precise effect with respect to the original.

Class	It is made
ripple-effect	Adds the effect to the component
ripples-light	Changes the color of the effect to its light version
ripples-dark (default)	Changes the color of the effect to its dark version

How to make use of it:

1. Insert the jQuery library and the Ripple.js plugin’s files into the HTML doc.

<link rel="stylesheet" href="/path/to/ripples.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/ripples.js"></script>

2. Add the CSS class ripple-effect to the goal component and the plugin will handle the remaining.

<button class="ripple-effect">
  Ripple Effect
</button>

<div class="ripple-effect">
  Div element is supported as well
</div>

3. Change the theme to darkish utilizing the ripples-dark class.

<button class="ripple-effect ripples-dark">
  Ripple Effect
</button>

<div class="ripple-effect ripples-dark">
  Div element is supported as well
</div>

4. Customize the Material ripple impact by overriding the default CSS styles as proven below.

.ripple {
  background-color: rgba(255, 255, 255, 0.16);
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  -webkit-transition: .6s;
  transition: .6s;
  -webkit-animation: ripple 0.3s ease-out;
  animation: ripple 0.3s ease-out;
}

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

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

Material Ripple Effect In jQuery, Ripple effect Plugin/Github