Waves

Getting Started

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!

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.

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.

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.

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.

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).

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.

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.

API

displayEffect(config)

Arguments

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

FAQ

What browsers support Waves?

Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. More browser support will comming.

Does Waves support mobile devices?

Waves is partially support mobile device by using touchstart and touchend event.

Can I make Waves better?

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

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.