Basic Buttons with Waves Effect

            <a class="btn btn-default waves-effect waves-light">Default</a>
            <a class="btn btn-primary waves-effect waves-light">Primary</a>
            <a class="btn btn-success waves-effect waves-light">Success</a>
            <a class="btn btn-info waves-effect waves-light">Info</a>
            <a class="btn btn-warning waves-effect waves-light">Warning</a>
            <a class="btn btn-danger waves-effect waves-light">Danger</a>
            <a class="btn btn-link">Link</a>

Basic Framed Buttons Premium component

            <a class="btn btn-border-default waves-effect">Default</a>
            <a class="btn btn-border-primary waves-effect">Primary</a>
            <a class="btn btn-border-success waves-effect">Success</a>
            <a class="btn btn-border-info waves-effect">Info</a>
            <a class="btn btn-border-warning waves-effect">Warning</a>
            <a class="btn btn-border-danger waves-effect">Danger</a>
                

Rounded Buttons Premium component

            <a class="btn btn-default btn-rounded waves-effect waves-light">Default</a>
            <a class="btn btn-primary btn-rounded waves-effect waves-light">Primary</a>
            <a class="btn btn-success btn-rounded waves-effect waves-light">Success</a>
            <a class="btn btn-info btn-rounded waves-effect waves-light">Info</a>
            <a class="btn btn-warning btn-rounded waves-effect waves-light">Warning</a>
            <a class="btn btn-danger btn-rounded waves-effect waves-light">Danger</a>
                

Rounded Framed Buttons Premium component

            <a class="btn btn-border-default btn-rounded waves-effect">Default</a>
            <a class="btn btn-border-primary btn-rounded waves-effect">Primary</a>
            <a class="btn btn-border-success btn-rounded waves-effect">Success</a>
            <a class="btn btn-border-info btn-rounded waves-effect">Info</a>
            <a class="btn btn-border-warning btn-rounded waves-effect">Warning</a>
            <a class="btn btn-border-danger btn-rounded waves-effect">Danger</a>
                

Floating Buttons

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
<a class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">add</i></a>

You can easily change the icon inside the button by using Google Material Icons or Font Awesome

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">star</i></a>

To change the button color edit color class by using one of 300 colors from our palette

<a class="btn-floating btn-large waves-effect waves-light blue"><i class="material-icons">star</i></a>

Fixed button Premium component

See the demo button in the lower right corner of this page.

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>

Flat button

<a class="btn-flat waves-effect waves-teal">Button flat</a>

Buttons with icons

            <a class="btn btn-default"><i class="material-icons left">star</i>Button</a>
            <a class="btn btn-default"><i class="material-icons right">star</i>Button</a>

Button Sizes

            <a class="btn btn-primary btn-xlg">XLarge</a>
            <a class="btn btn-primary btn-lg">Large</a>
            <a class="btn btn-primary btn-md">Medium</a>
            <a class="btn btn-primary btn-sm">Small</a>
            <a class="btn btn-primary btn-xs">XSmall</a>

Block Level Buttons

Large Block Level as

Small Block Level as

            <a class="btn btn-primary btn-block">Button 1</a>
            <a class="btn btn-default btn-block">Button 2</a>

            <a class="btn btn-primary btn-lg btn-block">Button 1</a>
            <a class="btn btn-default btn-lg btn-block">Button 2</a>

            <a class="btn btn-primary btn-sm btn-block">Button 1</a>
            <a class="btn btn-default btn-sm btn-block">Button 2</a>

Button States

            <a class="btn btn-primary">Primary button</a>
            <a class="btn btn-primary active">Active Primary</a>
            <a class="btn btn-primary disabled">Disabled Primary</a>