Buttons

help

Floating Button

Fixed Action Button (Default FAB)

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 theme-bg">
        <i class="large material-icons white-text">mode_edit</i>
    </a>
    <ul>
        <li><a class="btn-floating red"><i class="material-icons white-text">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons white-text">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons white-text">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons white-text">attach_file</i></a></li>
    </ul>
</div>
                                                    
                                                

Fixed Action Button (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 theme-bg">
        <i class="large material-icons white-text">share</i>
    </a>
    <ul>
        <li><a class="btn-floating red"><i class="material-icons  white-text">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons white-text">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons  white-text">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons  white-text">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 theme-bg">
        <i class="material-icons white-text">menu</i>
    </a>
    <ul>
        <li><a class="btn-floating red"><i class="material-icons white-text">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons white-text">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons white-text">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons white-text">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 theme-bg">
        <i class="large material-icons white-text">featured_play_list</i>
    </a>
    <ul>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons white-text">insert_chart</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons white-text">format_quote</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons white-text">publish</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons white-text">attach_file</i></a></li>
    </ul>
</div>