jQuery Plugin For Material Design Ripple Click Effect - Material Ripple

Provides a simple way to create interactive ripple click effects on action buttons/links, featured in the Google Material Design specification. Implemented in jQuery and animated with CSS3 transforms, @keyframes and animations.

See also:

• jQuery Plugin To Apply Ripple Effects To Elements - Ripple
• Ink Ripple Style User Interaction Using jQuery and CSS3 - Ink Drops
• Android L Style Click/Touch Effects with jQuery and CSS3 - rippler
• 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

How to use it:

1. Load the required jquery.materialripple.css in the document's head section.

<link rel="stylesheet" href="css/jquery.materialripple.css">

2. Load the latest jQuery library and the jquery.materialripple.js script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.materialripple.js"></script>

3. Add the class 'ripple' to your action buttons/links.

<a href="#" class="button ripple">Click me</a>

4. Call the function and the plugin will do the rest.

$(function(){
  $('.ripple').materialripple();
});

Change log:

2015-07-03

• Added support for multiple ripples, cleaned up code, removed ripple element after animation

---

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