## Introduction

The classic button, in different colors, sizes, and states

## Usages

 1. The button class can be used on:

* `<a>` anchor links
* `<button>` form buttons
* `<input type="submit">` submit inputs
* `<input type="reset">` reset inputs

```html
<a class="shapla-button">Anchor</a>
<button class="shapla-button">Button</button>
<input class="shapla-button" type="submit" value="Submit input">
<input class="shapla-button" type="reset" value="Reset input">
```

&nbsp;2. Colors

The button is available in all the different colors

```html
<button class="shapla-button is-primary">Primary</button>
<button class="shapla-button is-secondary">Secondary</button>
<button class="shapla-button is-success">Success</button>
<button class="shapla-button is-warning">Warning</button>
<button class="shapla-button is-error">Danger</button>
```

&nbsp;3. Sizes

The button comes in **4 different sizes**:

```html
<button class="shapla-button is-small">Small</button>
<button class="shapla-button">Default</button>
<button class="shapla-button is-normal">Normal</button>
<button class="shapla-button is-medium">Medium</button>
<button class="shapla-button is-large">Large</button>
```

&nbsp;4. Full width

The button can be full width

```html
<button class="shapla-button is-fullwidth">fullwidth</button>
```

&nbsp;4. Outline Button

```html
<button class="shapla-button is-outlined">Default</button>
<button class="shapla-button is-primary is-outlined">Primary</button>
<button class="shapla-button is-secondary is-outlined">Secondary</button>
<button class="shapla-button is-success is-outlined">Success</button>
<button class="shapla-button is-warning is-outlined">Warning</button>
<button class="shapla-button is-error is-outlined">Danger</button>
```

&nbsp;5. Rounded buttons

```html
<button class="shapla-button is-rounded">Default</button>
<button class="shapla-button is-primary is-rounded">Primary</button>
<button class="shapla-button is-secondary is-rounded">Secondary</button>
<button class="shapla-button is-success is-rounded">Success</button>
<button class="shapla-button is-warning is-rounded">Warning</button>
<button class="shapla-button is-error is-rounded">Danger</button>
```

&nbsp;6. FAB buttons

```html
<button class="shapla-button is-fab">+</button>
<button class="shapla-button is-primary is-fab">+</button>
<button class="shapla-button is-secondary is-fab">+</button>
<button class="shapla-button is-success is-fab">+</button>
<button class="shapla-button is-warning is-fab">+</button>
<button class="shapla-button is-error is-fab">+</button>
```

&nbsp;6. Raised buttons (with shadow)

```html
<button class="shapla-button has-shadow">Default</button>
<button class="shapla-button is-primary has-shadow">Primary</button>
<button class="shapla-button is-secondary has-shadow">Secondary</button>
<button class="shapla-button is-success has-shadow">Success</button>
<button class="shapla-button is-warning has-shadow">Warning</button>
<button class="shapla-button is-error has-shadow">Danger</button>
```