Buttons

Template use default Bootstrap button, with various colors and options. For more details, you can read Bootstrap buttons documentation:

Bootstrap Buttons Documentation

9 colors different

We have added various colors that you can find below.

White Default Primary Success Info Blue Warning Danger Dark

<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>

5 styles that you can mix

Classic Style

Default Bootstrap style with btn class and more colors.

<button type="button" class="btn btn-primary">Primary</button>

Embossed style

How to use? Just add btn-embossed class.

White Default Primary Success Info Warning Danger Dark

<button type="button" class="btn btn-default btn-embossed">Default</button>

Rounded style

How to use? Just add btn-rounded class.

Default Primary Success Info Warning Danger Dark

<button type="button" class="btn btn-success btn-rounded">Success</button>

Transparent style

How to use? Just add btn-transparent class.

Default Primary Success Warning Danger Dark

<button type="button" class="btn btn-warning btn-transparent">Warning</button>

Square style

How to use? Just add btn-square class.

Default Primary Success Info Warning Danger Dark

<button type="button" class="btn btn-primary">Primary</button>

Mixed style

Make your style unique by mixing it! For example btn-primary btn-square btn-embossed class.

Primary Success Info Warning Danger Dark

<button type="button" class="btn btn-primary btn-square btn-embossed">Primary</button>

4 sizes different

You can have small, normal, big and huge button size.

Small Normal Big Huge

<button type="button" class="btn btn-white btn-sm">Small</button>
<button type="button" class="btn btn-white">Normal</button>
<button type="button" class="btn btn-white btn-lg">Big</button>
<button type="button" class="btn btn-white btn-hg">Huge</button>

Animated Button State

Loading state are perfect for login, register or form submission.

Expand Left Expand Right Zoom in

<button type="button" class="btn ladda-button" data-style="expand-left"> Expand Left</button>
<button type="button" class="btn ladda-button" data-style="expand-right"> Expand Right</button>
<button type="button" class="btn ladda-button" data-style="zoom-in"> Zoom in</button>

Group Buttons

Group buttons are great if you want to display a group of actions. To do that, just put you buttons inside a btn-group class div.

<!-- HORIZONTAL STYLE -->
<div class="btn-group">
    <button type="button" class="btn btn-primary active"><i class="fa fa-align-left"></i>
    </button>
    <button type="button" class="btn btn-primary"><i class="fa fa-align-justify"></i>
    </button>
    <button type="button" class="btn btn-primary"><i class="fa fa-align-right"></i>
    </button>
</div>

<!-- VERTICAL STYLE -->
<div class="btn-group btn-group-vertical">
    <button type="button" class="btn btn-primary active"><i class="fa fa-align-left"></i>
    </button>
    <button type="button" class="btn btn-primary"><i class="fa fa-align-justify"></i>
    </button>
    <button type="button" class="btn btn-primary"><i class="fa fa-align-right"></i>
    </button>
</div>