PaperCSS

the less formal CSS framework

^

Buttons

Inspired by Imperfect Buttons

Link

Code:

<p>Inspired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect 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

Code:

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

Outline colors

Danger

Code:

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