Make Admin Template Documentation

## 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.

    <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.

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

### Rounded style

How to use? Just add `btn-rounded` class.

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

### Transparent style

How to use? Just add `btn-transparent` class.

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

### Square style

How to use? Just add `btn-square` class.

    <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.

    <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.

    <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.

    <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 group

### Vertical group

    <!-- 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>