Buttons: Floating Action Buttons

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviours that include morphing, launching, and a transferring anchor point.

ب

<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-lg"> ... </a>

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

<div class="fbtn-inner">
    <a class="fbtn fbtn-lg" data-toggle="dropdown"> ... </a>
    <div class="fbtn-dropup">
        <a class="fbtn fbtn-lg"> ... </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 fbtn-lg" data-toggle="dropdown">
        <span class="fbtn-ori"> ... </span>
        <span class="fbtn-sub"> ... </span>
    </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>