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