Android L Style Click/Touch Effects with jQuery and CSS3 - rippler

Rippler is Android L & Material Design inspired jQuery plugin used to create SVG based wave/ripple effects on your buttons (or any other Html elements) when clicked or tapped on. 

See also:

• Hamburger Button Transition Effect with jQuery and CSS3
• Google Material Design Ripple Effects with jQuery and CSS3
• Material Design Action Button Transition Effect with jQuery and CSS3
• Google Material Design Concept UI Button with jQuery and CSS3
• jQuery Plugin To Add Google Material Design Ripple Animations To Buttons

Basic Usage:

1. Include the necessary jQuery library and the jQuery rippler plugin's JS and CSS file in the document.

<link rel="stylesheet" href="path/to/rippler.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/rippler.min.js"></script>

2. Include the Bootstrap's CSS in the document so you can apply the ripple effects on any Bootstrap buttons (Optional).

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

3. Create a regular Bootstrap button with default ripple click effect.

<button class="btn btn-primary rippler rippler-default" href="#">Button</button>

4. Call the function on the button to enable the plugin.

$(document).ready(function() {
$(".rippler").rippler({
effectClass: 'rippler-effect',
effectSize: 16, // Default size (width & height)
addElement: 'div', // e.g. 'svg'(feature)
duration:  400
});
}); 

About Author:

Author: blivesta

Website: http://git.blivesta.com/rippler/

---

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