Waves

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

Applying Waves

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

Customization

Available Colors

Send Send Send Send Send Send Send Send 
                        
<a href="#!" class="waves-effect btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-light btn default">Send</a>
<a href="#!" class="waves-effect waves-red btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-yellow btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-orange btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-purple btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-green btn bg-white black-text">Send</a>
<a href="#!" class="waves-effect waves-teal btn bg-white black-text">Send</a>

Custom Colors

Send 
                        
<a href="#!" class="waves-effect waves-brown btn bg-white black-text">Send</a>
                                
                            
                        
 /*
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);
}