To put the waves effect on buttons, you just have to put the class waves-effect on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light as classes.
Wave
If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the waves-circle in addition to waves-effect
add
If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect
/*
When creating your CSS selector,
change "brown" to something of your choosing
*/
.waves-effect.waves-brown .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: rgba(121, 85, 72, 0.65);
}
To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!
<a href="#!" class="btn waves-effect waves-teal">Send</a>