Click Effect Inspired By Google's Material Design

Wave.js is a standalone JS library to create Google 3D design style click effects on any Html elements. HTML elements can be buttons, icons, images, DIV elements, or any other embedded elements.

How to make use of it:

1. Load the wave.css and wave.js on your internet web page.

<link rel="stylesheet" href="waves.css">
<script src="waves.js"></script>

2. Create an HTML factor on the place you want to apply a ripple impact when clicked.

<a href="#" class="example">Click Here</a>

3. Active the ripple impact on the factor you simply created.

Waves.attach('.example');

4. Initialize the library and finished.

Waves.init();

5. Styling the set off factor with the next CSS classes.

<a href="#" class="waves-button">
  Semi-rounded Button
</a>
<a href="#" class="float">
  Float Effect On Click
</a>
<a href="#" class="waves-circle">
  Circle Style
</a>
<a href="#" class="waves-block">
  Make the element display: block
</a>

Google Material Design Ripple Effects, Waves Plugin/Github

Wave-js