<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">add_circle_outline</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud_done</i>button</a><a class="btn-floating btn-large waves-effect waves-light blue"><i class="material-icons">add</i></a>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">
<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">timeline</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>You can also open and close the Fixed Action Button Menu programatically.
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();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 red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">timeline</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>Instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), Simply add the click-to-toggle class to the FAB.
<div class="fixed-action-btn horizontal click-to-toggle">
<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">timeline</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Add the toolbar class to the FAB.
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">timeline</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">voice_chat</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">cloud_upload</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>The Flat buttons are used to reduce excessive layering.
<a class="waves-effect waves-teal btn-flat">Button</a>It Represents an anchor or button to submit a form as a primary button. Instead of using a input tag, use a button tag with a type submit.
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>This button has a larger height and width buttons
<a class="waves-effect waves-light btn-large">button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">add_circle_outline</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud_done</i>button</a>The disabled buttonns are not clickable buttons. This style can be applied to all button types are following :
<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>