Download the latest version of Waves from Github repository. You can also install it via Bower with bower install waves or via npm with npm install node-waves. 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 use it :)
To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach()
Waves.attach() comes with 2 parameters, the first is the DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is an array of CSS classes that will be applied to the element.
After you've attached Waves to your HTML element, you can initialize Waves with Waves.init() to start the effect. You can also configure Waves by passing option parameter on Waves.init(). Please see API page for further information.
Waves is designed to be flexible. It means you still be able to attach the effect to another element after Waves.init().
In a couple examples above, you already see some Waves classes on Waves.attach(). Waves provide several classes to help you styling your effect. Here we go.
.waves-button for semi-rounded button style.
.waves-float for float effect when the element is clicked.
.waves-circle for circle (rounded) style.
.waves-block for adding display: block; to element.
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.