# Buttons

Various types of buttons. Using the base class `.btn`

Normal | Large `.btn-lg` | Small `.btn-sm` | Extra Small `.btn-xs` | Flat `.btn-flat` | Disabled `.disabled`
--- | --- | --- | --- | --- | ---

### Outline Buttons

Various types of buttons. Using the base class `.btn`

Normal | Large `.btn-lg` | Small `.btn-sm` | Extra Small `.btn-xs` | Flat `.btn-flat` | Disabled `.disabled`
--- | --- | --- | --- | --- | ---

### Gradient Buttons (bg-gradient-*)

Various types of buttons. Using the base class `.btn`

Normal | Large `.btn-lg` | Small `.btn-sm` | Extra Small `.btn-xs` | Flat `.btn-flat` | Disabled `.disabled`
--- | --- | --- | --- | --- | ---

### Buttons with Icons

### Block Buttons

### Horizontal Button Group

Horizontal button groups are easy to create with bootstrap. Just add your buttons inside `<div class="btn-group"></div>`

Button | Icons | Flat | Dropdown
--- | --- | --- | ---

### Appended Buttons

With dropdown
Normal
Flat

### Split buttons

Normal split buttons:

Flat split buttons:

Hoverable split buttons:

### Application Buttons

Add the classes `.btn.btn-app` to an `<a>` tag to achieve the following:

Edit Play Pause Save 3 Notifications 300 Products 891 Users 67 Orders 12 Inbox 531 Likes

Application Buttons with Custom Colors

300 Products 891 Users 67 Orders 12 Inbox 531 Likes

### Vertical Button Group

Vertical button groups are easy to create with bootstrap. Just add your buttons inside `<div class="btn-group-vertical"></div>`

Button | Icons | Flat | Dropdown
--- | --- | --- | ---

### Radio Button Group

Radio Button Group with `.btn-secondary`

Active Radio Radio

Radio Button Group with `.bg-olive`

Active Radio Radio