Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.
The waves effect can be applied to any element. To put the waves effect on buttons, you just have to put the class waves-effecton to the buttons. If you want the waves effect to be theme color instead, add both waves-effect waves-defaultas classes.
<button class="waves-effect waves-default btn white black-text">Wave</button>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!
<button class="waves-effect btn white black-text">Wave default</button><button class="waves-effect waves-light btn ">Wave light</button><button class="waves-effect waves-red btn white black-text">Wave red</button><button class="waves-effect waves-yellow btn white black-text">Wave yellow</button><button class="waves-effect waves-orange btn white black-text">Wave orange</button><button class="waves-effect waves-purple btn white black-text">Wave purple</button><button class="waves-effect waves-green btn white black-text">Wave green</button><button class="waves-effect waves-teal btn white black-text">Wave teal</button>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.
<button class="waves-effect waves-brown btn bg-white black-text">Send</button>/* 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);}