Google Material Design Ripple Effects with Wave.js

Preview:

Description:

Wave.js is a standalone JS library for creating Google Material Design styled click effects on any Html elements. The HTML elements can be buttons, icons, images, DIVs or any other inline elements.

Basic Usage:

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

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

2. Create an HTML element on where you wish to apply a ripple effect when clicked.

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

3. Active the ripple effect on the element you just created.

Waves.attach('.example');

4. Initialize the library and done.

Waves.init();

5. Styling the trigger element with the following 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>

Changelog:

2021-02-16

• Doc updated

v0.7.6 (06/15/2018)

• Fix SVGElements that do not shortcircuit getWavesEffectElement
• Fix memory leak
• Change bower main files to their unminified versions
• Add TypeScript typings
• Explicitly define window.Waves for global use