Buttons: Floating Action Buttons

A floating action button represents the primary action in an application.

Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.

add

<a class="fbtn waves-attach waves-circle"> ... </a>

<a class="fbtn fbtn-brand waves-attach waves-circle waves-light"> ... </a>

<a class="fbtn fbtn-brand-accent waves-attach waves-circle waves-light"> ... </a>

Use .fbtn-container to place FAB at the bottom right corner of a page. Creating a customised wrapper may be required to place FAB somewhere else on a page.

<div class="fbtn-container">
    <a class="fbtn"> ... </a>
</div>

add

<a class="fbtn fbtn-sm waves-attach waves-circle "> ... </a>

<div class="fbtn-inner">
    <a class="fbtn" data-toggle="dropdown"> ... </a>
    <div class="fbtn-dropdown">
        <a class="fbtn fbtn-sm"> ... </a>
        ...
    </div>
</div>

<div class="fbtn-inner">
    <a class="fbtn" data-toggle="dropdown"> ... </a>
    <div class="fbtn-dropup">
        <a class="fbtn fbtn-sm"> ... </a>
        ...
    </div>
</div>

Add meaningful animation to FAB by combining .fbtn-ori and .fbtn-sub. .fbtn-ori displays by default and translates to .fbtn-sub once the dropdown/dropup menu associated with its FAB is being made visible to the user. .fbtn-sub then translates back to the original .fbtn-ori once the associated menu starts to hide from the user.

<div class="fbtn-inner">
    <a class="fbtn" data-toggle="dropdown">
        <i class="icon fbtn-ori"> ... </i>
        <i class="icon fbtn-sub"> ... </i>
    </a>
    <div class="fbtn-dropdown">
        ...
    </div>
</div>

<a class="fbtn">
    <span class="fbtn-text"> ... </span>
    ...
</a>

<a class="fbtn">
    <span class="fbtn-text fbtn-text-left"> ... </span>
    ...
</a>