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.

Basic FAB

ب

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

Brand Colours

آ

ب

<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>

Colour Palettes

آ

.fbtn-green

ب

.fbtn-orange

ث

.fbtn-red

Positioning

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>

Sizes

add

<a class="fbtn fbtn-lg"> ... </a>

Dropdown/Dropup

Dropdown

<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>

Dropup

<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>

Transition Animation

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>

Tooltip Text

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

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