Buttons

FAB

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

add     add

<a class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-waves-light"><span class="material-symbols-outlined">add</span></a>
<a class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-waves-light disabled"><span class="material-symbols-outlined">add</span></a>

Mini FAB

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

add     add

<a class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light"><span class="material-symbols-outlined"></span>add</a>
<a class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light disabled"><span class="material-symbols-outlined">add</span></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 center-button-items eq-ui-btn-fab eq-ui-waves-light"><span class="material-symbols-outlined">edit</span></a>
                    <ul>
                        <li>
                            <a href="./" class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-fab eq-ui-btn-fab-with-tooltip eq-ui-waves-light eq-sea-blue-500">
                            <span class="material-symbols-outlined">monitoring</span></a>
                            <div class="tooltip-buttons mobile-tooltip-view"><span>Title 1 - The description i'll show is pretty long</span></div>
                        </li>
                        <li><a href="./" class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-fab eq-ui-btn-fab-with-tooltip eq-ui-waves-light eq-water-blue-500">
                            <span class="material-symbols-outlined">format_quote</span></a>
                            <div class="tooltip-buttons mobile-tooltip-view"><span>Title 2</span></div>
                        </li>
                        <li><a href="./" class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-fab eq-ui-btn-fab-with-tooltip eq-ui-waves-light eq-pastel-red-500">
                            <span class="material-symbols-outlined">upload</span></a>
                            <div class="tooltip-buttons"><span>Title 3 - Med</span></div>
                        </li>
                        <li><a href="./" class="btn btn-primary center-button-items eq-ui-btn-fab eq-ui-btn-fab eq-ui-btn-fab-with-tooltip eq-ui-waves-light eq-desert-orange-500">
                            <span class="material-symbols-outlined">attach_file</span></a>
                            <div class="tooltip-buttons mobile-tooltip-view"><span>Title 4 - Example 1 </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"><span class="center-button-items">Button</span></a>
<a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text"><span class="center-button-items">Button</span></a>
<a class="btn btn-default eq-ui-btn-flat eq-ui-waves disabled"><span class="center-button-items">Disabled</span></a>

Raised

Raised button variation, add the class btn-default.

Button     Disabled

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

Colored

Colored button variations.

Button     Success     Info     Warning     Danger     Custom

<a class="btn btn-primary eq-ui-waves-light"><span class="center-button-items">Button</span></a>
<a class="btn btn-success eq-ui-waves-light"><span class="center-button-items">Success</span></a>
<a class="btn btn-info eq-ui-waves-light"><span class="center-button-items">Info</span></a>
<a class="btn btn-warning eq-ui-waves-light"><span class="center-button-items">Warning</span></a>
<a class="btn btn-danger eq-ui-waves-light"><span class="center-button-items">Danger</span></a>
<a class="btn btn-primary eq-ui-waves-light eq-desert-orange-500"><span class="center-button-items">Custom</span></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"><span class="center-button-items">Button</span></a>
<a class="btn btn-primary btn-lg eq-ui-waves-light"><span class="center-button-items">Large Button</span></a>

Icon

Icon button variation, add the left or right icon.

cloudButton     Buttoncloud

<a class="btn btn-primary eq-ui-waves-light"><span class="center-button-items"><span class="material-symbols-outlined">cloud</span><span>Button</span></span></a>
<a class="btn btn-primary eq-ui-waves-light"><span class="center-button-items"><span>Button</span><span class="material-symbols-outlined">cloud</span></span></a>