Waves on others
DIVs (show source)
Images (show source)
Image Source: © Moyan Brenn. Flickr
Image Source: © Roberto Ferrari. Flickr
Getting Started
It's easy to use Waves. Download the latest version of Waves from Github repository. Include Waves.css and Waves.js to your HTML file. And Waves is ready to use!
To put Waves effect on your buttons, wrap it inside a <span> that contain .waves-element and .waves-button class.
Waves support Font Awesome icons, so you can give the icons Waves effect. It's simple, just give additional .waves-element and .waves-icon 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-element 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-element. You can do this by set up the color and backgroun-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-element 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 raise effect when you click an element
by adding .waves-will-raise class to the element. Once again, before put raise effect, your have to make sure the element has been colored, to prevent weird shadow on the element.
FAQ
What browser will support Waves?
Waves currently has been tested on Chrome 35. More browser support will follow.
