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.
Horizontal FAB
Creating a horizontal FAB is easy! Just add the class horizontal
to the FAB.
<div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 19px;">
<a class="btn-floating btn-large red">
<i class="mdi-social-notifications-none"></i>
</a>
<ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a>
</li>
<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a>
</li>
<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a>
</li>
<li><a class="btn-floating blue"><i class="large mdi-editor-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" style="position: absolute; right: 19px;">
<a class="btn-floating btn-large red">
<i class="mdi-navigation-menu"></i>
</a>
<ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a>
</li>
<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a>
</li>
<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a>
</li>
<li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a>
</li>
</ul>
</div>