It's easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!

{{#code class="lang-markup"}} Click Here {{/code}}

Advanced:
Waves also provide LESS, SCSS, and SASS source. So, feel free to used it :)

To put Waves effect on your buttons, just add .waves-effect and .waves-button class to your buttons.

{{#code class="lang-markup"}} Click Here A Tag {{/code}}

Normally, the effect will not work on single tag element like <input>. That's why Waves will wrap <input> inside <i> automatically if you display the effect.

{{#code class="lang-markup"}} {{/code}}

Waves can also be applied with icons (like FontAwesome) by using waves-circle, so you can give the icons Waves effect. It's simple, just give additional .waves-effect and .waves-circle class to your <i> tags and Waves will wrap icon inside circle spot that will prevent Waves effect spreading.

{{#code class="lang-markup"}} {{/code}}

You can also give Waves effect to other element tag like <div> or <img>. All you need to do is just put .waves-effect class. For element that not have closing tag like <img>, you have to wrap it inside <span>, and for element that have blocky display like <div>, you need to put .waves-block class to keep its shape.

{{#code class="lang-markup"}} {{/code}}

Styling

Waves give you capabilities to color your .waves-effect. You can do this by set up the color and background-color/background properties on your element style (or CSS file).

{{#code class="lang-markup"}} Button B Button B {{/code}}

By default, Waves ripple is darker. If you want the ripple is lighter, you can set .waves-light along side .waves-effect class. Make sure the element has been colored, because if it haven't colored yet, you cannot see the light ripple.

{{#code class="lang-markup"}} Button B {{/code}}

Not only give your "Waves effect", Waves also provide float effect when you click an element by adding .waves-float class to the element. Once again, before put float effect, your have to make sure the element has been colored, to prevent weird shadow on the element.

{{#code class="lang-markup"}} Button B {{/code}}

Quick Fix

IE Tap highlight on Windows Phone

By default if you access a web page using IE in Windows Phone, you will get tap highlight effect when you tapping a link or button and this highlight will shadowed Waves effect. To prevent this thing happen, you will need to add msapplication-tap-highlight meta tag on your header.

{{#code class="lang-markup"}} {{/code}}

displayEffect(config)

Arguments

• config - (optional) Configuration object for displaying Waves effect.

{{#code class="lang-javascript"}} { // How long Waves effect duration // when its clicked (in milisecond) duration: 500 } {{/code}}

Browser support?

• IE 10++
• Chrome 14++
• Firefox 9++
• Safari 5.1++
• Opera 11.6++
• iOS 6++ (Safari)
• Windows Phone 8.1 (IE)
• Android Browser 4++

Can I make Waves better?

Yes, I strongly encourage you to contribute to make Waves better. So, if you find a bug, or have nice idea for Waves development, please mention me.