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. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!
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 support Font Awesome icons, so you can give the icons Waves effect. It's simple, just give additional .waves-effect 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-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 raise effect when you click an element
by adding .waves-float 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.
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.
