Here is a quick demo to get you going.

You can download Ripplify on Github. You can also play around with the CodePen example.

First, download Riplify from Github. Next, load the Ripplify CSS file, jQuery, and the Ripplify Javascript file.

<link rel="stylesheet" href="dist/css/ripplify-min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/js/ripplify-min.js"></script>

To create your first button, add the class, .btn-ripple, to any of your buttons/elements to instantly have a Ripplify button.

Code

<button class="btn-ripple">Regular Ripplify Button</button>

Result

Changing the speed of your button animation

Simply add data-animation-duration="4000" to your button to change the animation duration to 4,000 milliseconds (4 seconds).

Code

<button 
	data-animation-duration="4000"
	class="btn-ripple">
	Custom Speed! - 4000 (milliseconds)
</button>

Result

Changing the color of your ripple animation

Add data-ripple-color="orange" to your button in order to achieve an orange ripple animation color.

Code

<button 
	data-ripple-color="orange"
	class="btn-ripple">
	Custom Ripple Color! - Orange
</button>

Result