Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design
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
I am a very simple card. I am good at containing small bits of information.I
am convenient because I require little markup to use effectively. I am similar to what is called a
panel in other frameworks.
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
Customization
There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class
<a href="#!" class="btn waves-effect waves-teal">Send</a>
Custom Colors
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);
}
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
<i class="mdi-content-add"></i>
</a>