Buttons

FAB

Fab button variation, add the class eq-ui-btn-fab.

   

<a class="btn btn-primary eq-ui-btn-fab eq-ui-waves-light"><i class="mdi mdi-plus icon"></i></a>
<a class="btn btn-primary eq-ui-btn-fab eq-ui-waves-light disabled"><i class="mdi mdi-plus icon"></i></a>

Mini FAB

Mini Fab button variation, add the class eq-ui-btn-fab eq-ui-btn-mini-fab.

   

<a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light"><i class="mdi mdi-plus icon"></i></a>
<a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light disabled"><i class="mdi mdi-plus icon"></i></a>

Action FAB

Action Fab button variation. You can see in bottom right on this page

<div class="eq-ui-btn-fab-action">
    <a class="btn btn-primary eq-ui-btn-fab eq-ui-waves-light"><i class="mdi mdi-pencil icon"></i></a>
    <ul>
        <li>
         <a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-sea-blue-500">
         <i class="mdi mdi-chart-bar icon"></i></a>
         <div class="tooltip-buttons mobile-tooltip-view"><span>Title 1 - The description i'll show is pretty long</span></div>
        </li>
        <li>
         <a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-water-blue-50">
         <i class="mdi mdi-format-quote icon"></i></a>
         <div class="tooltip-buttons mobile-tooltip-view"><span>Title 1 - The description i'll show is pretty long</span></div>
        </li>
        <li>
         <a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-pastel-red-500">
         <i class="mdi mdi-upload icon"></i></a>
         <div class="tooltip-buttons mobile-tooltip-view"><span>Title 1 - The description i'll show is pretty long</span></div>
        </li>
        <li>
         <a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-desert-orange-500">
         <i class="mdi mdi-paperclip icon"></i></a>
         <div class="tooltip-buttons mobile-tooltip-view"><span>Title 1 - The description i'll show is pretty long</span></div>
        </li>
    </ul>
</div>

You can also toggle them programmatically:

$('.eq-ui-btn-fab-action').toggleFAB();

You can also open them programmatically:

$('.eq-ui-btn-fab-action').openFAB();

You can also close them programmatically:

$('.eq-ui-btn-fab-action').closeFAB();

Flat

Flat button variation, add the class eq-ui-btn-flat.

Button     Button     Disabled

<a class="btn btn-default eq-ui-btn-flat eq-ui-waves">Button</a>
<a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text">Button</a>
<a class="btn btn-default eq-ui-btn-flat eq-ui-waves disabled">Disabled</a>

Raised

Raised button variation, add the class btn-default.

Button     Disabled

<a class="btn btn-default eq-ui-waves">Button</a>
<a class="btn btn-default eq-ui-waves disabled">Disabled</a>

Colored

Colored button variations.

Button     Success     Info     Warning     Danger     Custom

<a class="btn btn-primary eq-ui-waves-light">Button</a>
<a class="btn btn-success eq-ui-waves-light">Success</a>
<a class="btn btn-info eq-ui-waves-light">Info</a>
<a class="btn btn-warning eq-ui-waves-light">Warning</a>
<a class="btn btn-danger eq-ui-waves-light">Danger</a>
<a class="btn btn-primary eq-ui-waves-light eq-desert-orange-500">Custom</a>

Size

Size button variation, add the class btn-lg for large size.

Button     Large Button

<a class="btn btn-primary eq-ui-waves-light">Button</a>
<a class="btn btn-primary btn-lg eq-ui-waves-light">Large Button</a>

Icon

Icon button variation, add the left or right icon.

Button     Button

<a class="btn btn-primary eq-ui-waves-light"><i class="mdi mdi-cloud icon icon-left icon-18"></i>Button</a>
<a class="btn btn-primary eq-ui-waves-light"><i class="mdi mdi-cloud icon icon-right icon-18"></i>Button</a>