There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

FlatDefaultPrimarySuccessInfoWarningDanger

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

DisabledButtonButtonButtonadd

<a class="btn-large disabled">Button</a><a class="btn disabled">Button</a><a class="btn-flat disabled">Button</a><a class="btn-floating disabled"><i class="material-icons">add</i></a>

Floatingaddsendcall

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

Fixed Action Button

If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the 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>

You can also open the Fixed Action Button Menu programatically, the below code will make your FAB Menu open:

$('.fixed-action-btn').openFAB();

You can also close them programatically:

$('.fixed-action-btn').closeFAB();

RaisedWhiteIndigoPinkBlueGreenOrangeRedPurple
cloudbuttoncloudbutton

<a class="waves-effect waves-light btn">button</a><a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a><a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

Horizontal FAB

Creating a horizontal FAB is easy! Just add the class horizontalto the FAB.

<div class="fixed-action-btn horizontal" 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>

Horizontal FAB

If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the click-to-toggleclass to the FAB.

<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">    <a class="btn-floating btn-large red">        <i class="material-icons">menu</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>