##### Waves

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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

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
I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.

    <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="mdi-content-add"></i>
    </a>

Default add
`waves-light` add
add

- help_outline
- widgets
- today
- mail_outline