Buttons
There are 3 main button types described in material design. Raised Button, Floating circular action button & Flat buttons.
Raised Button
<!-- Default Buttons -->
<a class="waves-effect waves-light btn default">button</a>
<a class="waves-effect waves-light btn teal"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn purple darken-4"><i class="material-icons right">backup</i>button</a>
<a class="btn disabled">disable</a>
<!-- Dropdown Trigger -->
<a class='dropdown-button waves-effect waves-light btn red' href='#' data-activates='dropdown-raised'>
<i class="material-icons right">arrow_drop_down</i>Dropdown
</a>
<!-- Dropdown Structure -->
<ul id='dropdown-raised' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<!-- End Default Buttons -->
<!-- Large Buttons -->
<a class="waves-effect waves-light btn-large default">button</a>
<a class="waves-effect waves-light btn-large blue-grey"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large green"><i class="material-icons right">backup</i>button</a>
<a class="btn-large disabled">disable</a>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn-large waves-effect waves-light' href='#' data-activates='dropdown-large-raised'>
<i class="material-icons right">arrow_drop_down</i>Dropdown
</a>
<!-- Dropdown Structure -->
<ul id='dropdown-large-raised' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<!-- End Large Buttons -->
/* Initialization for dropdowns is only necessary if you create them dynamically */
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on click
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown above the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
Floating Button
<!-- Default Buttons -->
<a class="btn-floating waves-effect waves-light default"><i class="material-icons">add</i></a>
<a class="btn-floating waves-effect waves-light red"><i class="material-icons">clear</i></a>
<a class="btn-floating disabled"><i class="material-icons">remove</i></a>
<a class="btn-floating waves-effect waves-light cyan darken-2 z-depth-0"><i class="material-icons">cloud_download</i></a>
<!-- End Default Buttons -->
<!-- Large Buttons -->
<a class="btn-floating btn-large waves-effect waves-light default"><i class="material-icons">android</i></a>
<a class="btn-floating btn-large waves-effect waves-light orange"><i class="material-icons">backup</i></a>
<a class="btn-floating btn-large disabled"><i class="material-icons">favorite</i></a>
<a class="btn-floating btn-large waves-effect waves-light deep-purple z-depth-0"><i class="material-icons">search</i></a>
<!-- End Large Buttons -->
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.
Horizontal FAB
Creating a horizontal FAB is easy! Just add the class horizontal to the FAB.
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large default">
<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>
Click-only 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-toggle class to the FAB.
<div class="fixed-action-btn horizontal click-to-toggle">
<a class="btn-floating btn-large default">
<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>
FAB to Toolbar
Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the toolbar class to the FAB.
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large default">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
Flat Button
<a class="waves-effect waves-light btn-flat text-default">button</a>
<a class="waves-effect waves-teal btn-flat text-teal"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-red btn-flat text-red"><i class="material-icons right">backup</i>button</a>
<a class="btn-flat disabled">disable</a>