Ripple Effect

Get a beautiful Material Design ripple effect in pure JavaScript for your website in less than 1 minute. The script is not blocking rendering on the first paint, because the effect only gets fired on onpointerdown and onpointerup events on the document.

Getting Started

Import the ripple.js file in your project:

<script src="ripple.js"></script>

Add ripple class to your element:

<button class="ripple">Button with ripple effect</button>

Done!

Demo

Works only in browsers with pointer events support.

https://htmlpreview.github.io/?https://github.com/mariusclaret/ripple-effect/blob/master/demo.html

Author

Marius Claret (@mariusclaret || https://twitter.com/mariusclaret)