Waves

Wave

<a class="waves-effect waves-light btn-large" href="#">Wave</a>

Available Colors

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">Press Me ;)</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>