Create Material Ripple Click Effects using jQuery and CSS3

Material Click is a jQuery plugin that uses CSS3 transforms to apply Material Design inspired ripple click effects on any DOM elements. Fully customizable via CSS.

How to use it:

1. Load jQuery library and the jQuery Material Click plugin's stylesheet and JavaScript in the document.

<link rel="stylesheet" href="material-click.css">

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="material-click.js"></script>

2. Add the CSS class 'ripple-effect' to a DOM element and the plugin will do the rest.

<div class="ripple-effect"></div>

3. Change the color of the ripple effect.

<div class="ripple-effect" 
     data-ripple-color="#ccc">
</div>

4. Change the border radius of the ripple effect.

<div class="ripple-effect" 
     data-ripple-wrap-radius="50%">
</div>

5. Change the limit of the ripple effect.

<div class="wrapper">
  <div class="ripple-effect" 
  data-ripple-limit=".wrapper"></div>
</div>

6. Add custom CSS class to the ripple effect.

<div class="ripple-effect" 
     data-ripple-wrap-class="MY-CLASS">
</div>

---

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