Floating buttons

This button represents the primary action in an application. Dont add text inside button!

How to use

<a class="btn btn-{accent|primary|secondary} btn-fab btn-sm" href="#" role="button">
  <span class="icon icon-add"></span>  
</a>
<a class="btn btn-{accent|primary|secondary} btn-fab" href="#" role="button">
  <span class="icon icon-add"></span>  
</a>

Positions

Use btn-action-r, btn-action-l, btn-action-b, btn-action-t

<div class="btn-action btn-action-{position}">
  <a href="javascript:;" class="btn btn-accent btn-fab" role="button">
    <span class="icon icon-add"></span>
    <span class="icon icon-pencil"></span> 
  </a>
  <ul class="btn-action-group">
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-pen"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-pen"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-pen"></span> 
      </a>
    </li>
  </ul>
</div>

With tooltips

<div class="btn-action btn-action-b">
  <a href="javascript:;" class="btn btn-accent btn-fab tooltip-test" role="button" data-toggle="tooltip" data-placement="right" title="Edit">
    <span class="icon icon-add"></span>
    <span class="icon icon-pencil"></span> 
  </a>
  <ul class="btn-action-group">
    <li>
      <a class="btn btn-primary btn-fab btn-sm tooltip-test" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Copy">
        <span class="icon icon-file-copy"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm tooltip-test" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Favorite">
        <span class="icon icon-vote-star"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm tooltip-test" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Power off">
        <span class="icon icon-power-button"></span> 
      </a>
    </li>
  </ul>
</div>

Fixed

Use btn-action-fixed

<div class="btn-action btn-action-fixed btn-action-t">
  <a href="javascript:;" class="btn btn-accent btn-fab" role="button">
    <span class="icon icon-add"></span>
    <span class="icon icon-pencil"></span>
  </a>
  <ul class="btn-action-group">
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-file-copy"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-vote-star"></span> 
      </a>
    </li>
    <li>
      <a class="btn btn-primary btn-fab btn-sm" href="#" role="button">
        <span class="icon icon-power-button"></span> 
      </a>
    </li>
  </ul>
</div>