CSS3 Powered Material Ripple Effect On Click - material_ripple

A lightweight jQuery plugin that utilizes CSS3 transforms and animations to create Material Design style ripple effects on buttons when clicked / tapped.

How to use it:

1. Load the latest version of jQuery library together with the jQuery material_ripple plugin's file in the webpage.

<link href="material_ripple.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>
<script src="material_ripple.js"></script>

2. Add the CSS class 'material_ripple' to your buttons.

<div class="material_ripple">Default Ripple</div>

3. Call the plugin on the button and done.

$('.material_ripple').material_ripple();

4. Change the default ripple color using data-color attribute.

<div class="material_ripple" data-color="#39a1f4">Colored</div>

5. More configuration options to customize the ripple effect.

$('.material_ripple').material_ripple({

  // CSS class for the ripple effect
  rippleClass: "ripple-animate",

  // background color
  background: "#fff",

  // animatioon duration in ms
  animateDuration: 2000
  
});

---

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