Material Design Ripple Effect With jQuery And CSS3 - ripple.js

Just another jQuery & CSS3 implementation of a smooth, interactive ripple effect on click event following the Google Material Design's Responsive interaction specification.

How to use it:

1. Load the style sheet ripple.min.css in the head section and JavaScirpt ripple.min.js after jQuery library but before the closing body tag.

<!-- Material Ripple CSS -->
<link rel="stylesheet" href="dist/ripple.min.css">

<!-- jQuery library -->
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>

<!-- Material Ripple JS -->
<script src="dist/ripple.min.js"></script>

2. Add the CSS class 'material-ripple' to your element and specify the ripple effect using data-ripple-color attribute.

<div class="material-ripple" data-ripple-color="#2ecc71">
  <span>Element</span>
</div>

3. Make the element relatively positioned in the CSS.

.material-ripple > span {
  position: relative;
  display: block;
}

4. You can also change the ripple color through CSS.

<div class="material-ripple custom-ripple">
  <span>Element</span>
</div>

.custom-ripple > .material-ink {
  background-color: #2ecc71;
}

---

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