Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.

Basic

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

<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

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>
DefaultPress Me ;)
waves-lightPress Me ;)
waves-redPress Me ;)
waves-yellowPress Me ;)
waves-orangePress Me ;)
waves-purplePress Me ;)
waves-greenPress Me ;)
waves-tealPress Me ;)
waves-pinkPress Me ;)
waves-deep-purplePress Me ;)
waves-indigoPress Me ;)
waves-bluePress Me ;)
waves-light-bluePress Me ;)
waves-cyanPress Me ;)
waves-tealPress Me ;)
waves-light-greenPress Me ;)
waves-limePress Me ;)
waves-amberPress Me ;)
waves-deep-orangePress Me ;)
waves-brownPress Me ;)
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);
}

Circle

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
Default
waves-light
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
  <i class="mdi-content-add"></i>
</a>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John DoeHi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John DoeAlso, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John DoeHi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John DoeI do not use Facebook. But you can follow me in Twitter.
It's good idea!
John DoeYou can find me here - https://twitter.com/nkdevv