roobie/docs/components/button.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Button
Simple button styles that can be applied to most elements.

## Basic
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-outline">Outline</button>

```html
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-outline">Outline</button>
```

## Theme
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Seconday</button>
<button type="button" class="btn btn-success">Success</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-info">Info</button>

```html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Seconday</button>
<button type="button" class="btn btn-success">Success</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-info">Info</button>
```

## Colored
<button type="button" class="btn bg-red2">Red</button>
<button type="button" class="btn bg-orange2">Orange</button>
<button type="button" class="btn bg-yellow2">Yellow</button>
<button type="button" class="btn bg-green2">Green</button>
<button type="button" class="btn bg-blue2">Blue</button>
<button type="button" class="btn bg-indigo2">Indigo</button>
<button type="button" class="btn bg-violet2">Violet</button>

```html
<button type="button" class="btn bg-red2">Red</button>
<button type="button" class="btn bg-orange2">Orange</button>
<button type="button" class="btn bg-yellow2">Yellow</button>
<button type="button" class="btn bg-green2">Green</button>
<button type="button" class="btn bg-blue2">Blue</button>
<button type="button" class="btn bg-indigo2">Indigo</button>
<button type="button" class="btn bg-violet2">Violet</button>
```

## Raised
<button type="button" class="btn box">Raised</button>
<button type="button" class="btn boxh">Raised with hover</button>

```html
<button type="button" class="btn box">Raised</button>
<button type="button" class="btn boxh">Raised with hover</button>
```

## Inset
<button type="button" class="btn in">Inset</button>
<button type="button" class="btn inh">Inset with hover</button>

```html
<button type="button" class="btn in">Inset</button>
<button type="button" class="btn inh">Inset with hover</button>
```

## Icon
<button type="button" class="btn btn-primary"><i class="icon icon-heart"></i></button>
<button type="button" class="btn btn-primary"><i class="icon icon-facebook"></i></button>
<button type="button" class="btn btn-primary"><i class="icon icon-comment"></i></button>

```html
<button type="button" class="btn btn-primary"><i class="icon icon-heart"></i></button>
<button type="button" class="btn btn-primary"><i class="icon icon-facebook"></i></button>
<button type="button" class="btn btn-primary"><i class="icon icon-comment"></i></button>
```

## Variations
<button type="button" class="btn bdr3 bdr-success">Success</button>
<button type="button" class="btn bdr3 bdr-warning">Warning</button>
<button type="button" class="btn bdr3 bdr-danger">Danger</button>
<button type="button" class="btn bdr3 bdr-info">Info</button>
<button type="button" class="btn bdr3 bdr-red2">Red</button>
<button type="button" class="btn bdr3 bdr-orange2">Orange</button>
<button type="button" class="btn bdr3 bdr-yellow2">Yellow</button>
<button type="button" class="btn bdr3 bdr-green2">Green</button>
<button type="button" class="btn bdr3 bdr-blue2">Blue</button>
<button type="button" class="btn bdr3 bdr-indigo2">Indigo</button>
<button type="button" class="btn bdr3 bdr-violet2">Violet</button>
<button type="button" class="btn bdr3 bdr-success success">Success</button>
<button type="button" class="btn bdr3 bdr-warning warning">Warning</button>
<button type="button" class="btn bdr3 bdr-danger danger">Danger</button>
<button type="button" class="btn bdr3 bdr-info info">Info</button>
<button type="button" class="btn bdr3 bdr-red red">Red</button>
<button type="button" class="btn bdr3 bdr-orange orange">Orange</button>
<button type="button" class="btn bdr3 bdr-yellow yellow">Yellow</button>
<button type="button" class="btn bdr3 bdr-green green">Green</button>
<button type="button" class="btn bdr3 bdr-blue blue">Blue</button>
<button type="button" class="btn bdr3 bdr-indigo indigo">Indigo</button>
<button type="button" class="btn bdr3 bdr-violet violet">Violet</button>

```html
<button type="button" class="btn bdr3 bdr-success">Success</button>
<button type="button" class="btn bdr3 bdr-warning">Warning</button>
<button type="button" class="btn bdr3 bdr-danger">Danger</button>
<button type="button" class="btn bdr3 bdr-info">Info</button>
<button type="button" class="btn bdr3 bdr-red2">Red</button>
<button type="button" class="btn bdr3 bdr-orange2">Orange</button>
<button type="button" class="btn bdr3 bdr-yellow2">Yellow</button>
<button type="button" class="btn bdr3 bdr-green2">Green</button>
<button type="button" class="btn bdr3 bdr-blue2">Blue</button>
<button type="button" class="btn bdr3 bdr-indigo2">Indigo</button>
<button type="button" class="btn bdr3 bdr-violet2">Violet</button>
<button type="button" class="btn bdr3 bdr-success success">Success</button>
<button type="button" class="btn bdr3 bdr-warning warning">Warning</button>
<button type="button" class="btn bdr3 bdr-danger danger">Danger</button>
<button type="button" class="btn bdr3 bdr-info info">Info</button>
<button type="button" class="btn bdr3 bdr-red red">Red</button>
<button type="button" class="btn bdr3 bdr-orange orange">Orange</button>
<button type="button" class="btn bdr3 bdr-yellow yellow">Yellow</button>
<button type="button" class="btn bdr3 bdr-green green">Green</button>
<button type="button" class="btn bdr3 bdr-blue blue">Blue</button>
<button type="button" class="btn bdr3 bdr-indigo indigo">Indigo</button>
<button type="button" class="btn bdr3 bdr-violet violet">Violet</button>
```