Floatingaction 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-bottomapplies to .fab.

Right

.fab-dir-rightapplies to .fab.

Left

.fab-dir-leftapplies to .fab.

Fixed positioning

To place your FAB in bottom right side of the page, apply .fab-fixedto 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>