---
title: Buttons
description: PaperCSS Buttons
---

Insprired by [Imprefect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)

<button class="btn-large">Large</button>
<button>Default</button>
<button class="btn-small">Small</button>
<a href="#" class="paper-btn">Link</a>

<div class="row">
  <div class="col-6 col">
    <button class="btn-block">Block level</button>
  </div>
</div>

<button class="disabled">Disabled</button>
<button disabled>Disabled</button>

#### Code:

```html
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
<button class="btn-large">Large</button>
<button>Default</button>
<button class="btn-small">Small</button>
<a href="#" class="paper-btn">Link</a>
<div class="row">
  <div class="col-6 col">
    <button class="btn-block">Block level</button>
  </div>
</div>
<button class="disabled">Disabled</button>
<button disabled>Disabled</button>
```

### Colors

<input type="button" class="paper-btn btn-primary" value="Primary"/>
<input type="button" class="btn-secondary" value="Secondary"/>
<button class="btn-success">Success</button>
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>

#### Code:

```html
<input type="button" class="paper-btn btn-primary" value="Primary"/>
<input type="button" class="btn-secondary" value="Secondary"/>
<button class="btn-success">Success</button>
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
```
