Waves on icons
Plain Icons (show source)
Colored Icons (show source)
Waves on others
DIVs (show source)
Images (show source)


Image Source: © Moyan Brenn. Flickr
Image Source: © Agustin Rafael Reyes. Flickr
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!
{{#code class="lang-markup"}}
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
Browser support?
Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. More browser support will comming.
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.
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.