#### Introduction

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

Wave

#### Applying Waves

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.

      <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">Send</a>

DefaultSend
`waves-light` Send
`waves-red` Send
`waves-yellow` Send
`waves-orange` Send
`waves-purple` Send
`waves-green` Send
`waves-teal` Send

##### 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`

##### HTML Markup

      <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
        <i class="material-icons">add</i>
      </a>

Defaultadd
`waves-light` add

- Introduction
- Applying Waves
- Customization
- Circle Waves