Floating action buttons Material floating action button (FAB) with sub buttons.

Default

Each page shouldn't have more than one floating action button.

<div class="fab">
  <button class="btn btn-float btn-primary" data-toggle="button">
    <i class="fab-icon-default ti-plus"></i>
    <i class="fab-icon-active ti-close"></i>
  </button>

  <ul class="fab-buttons">
    <li><a class="btn btn-float btn-sm btn-info" href="#">1</a></li>
    <li><a class="btn btn-float btn-sm btn-info" href="#">2</a></li>
    <li><a class="btn btn-float btn-sm btn-info" href="#">3</a></li>
  </ul>
</div>

Bottom

.fab-dir-bottom applies to .fab.

Right

.fab-dir-right applies to .fab.

Left

.fab-dir-left applies to .fab.

Fixed positioning

To place your FAB in bottom right side of the page, apply .fab-fixed to your .fab. Please note that you can only have one fixed FAB.

<div class="fab fab-fixed">
    ...
</div>

Single action

Your FAB do not necessarily include sub actions. Following code demonstrate a FAB with single action and fixed to bottom right side of the page.

<div class="fab">
  <button class="btn btn-float btn-primary"><i class="ti-plus"></i></button>
</div>