Simple Ripple Click Effect Using jQuery And CSS3 Transforms

A lightweight and easy-to-use jQuery plugin that applies a Material Design 'Ripple Click Effect' to any DOM element using CSS3 transforms.

How to use it:

1. Load the JavaScript ripple.js and Stylesheet ripple.css in the HTML document.

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

2. Add the data-ripple attribute to the target element and the plugin will do the rest.

<button data-ripple>
  Default Theme
</button>

3. Set the theme of the ripple click effect.

<button data-ripple data-ripple-theme="light">
  Light Theme
</button>
    
<button data-ripple data-ripple-theme="dark">
  Dark Theme
</button>

/* override the theme styles */
.ripple-light .ripple {
  background: rgba(255, 255, 255, 0.8);
}

.ripple-dark .ripple {
  background: rgba(0, 0, 0, 0.8);
}

4. You can also apply the plugin to a group of elements by using the data-ripple-selector attribute.

<ul class="list-group" 
    data-ripple data-ripple-theme="dark" 
    data-ripple-selector=".list-group-item">
    <li class="list-group-item">A simple default list group item</li>
    <li class="list-group-item">A simple primary list group item</li>
    <li class="list-group-item">A simple secondary list group item</li>
    <li class="list-group-item">A simple success list group item</li>
    ...
</ul>

---

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