Plain

Plain a Plain button

<button class='btn'>Button reset</button>
<a class='btn'>Plain a</a>

Button reset

<button class='btn-reset'>Button reset</button>

Colors

Use with Tachyons' regular colors

Green a Gray a Yellow a Purple a Green a

class="btn bg-green white"
class="btn bg-yellow black"

Borders

Bordered Bordered Bordered Bordered

class="btn b--near-black"
class="btn b--light-gray"
class="btn blue b--blue"
class="btn bg-yellow hot-pink b--green"

Sizes

Add padding and bump text size with Tachyons

Size 3 text Size 4 text Just more padding

class="btn bg-hot-pink white f3 ph3 pv2"
class="btn bg-hot-pink white f4 ph3 pv2"
class="btn bg-hot-pink white ph3 pv2"

Small button Smaller button

class="btn f6 bg-purple white"
class="btn f7 bg-purple white normal"

Enormous button

class='btn bg-light-blue navy f1 ph5 pv3 br-pill'

Button groups

Use groups to remove border radii between buttons

<div class='btn-group'>
  <button class='btn bg-green'>One</button><button class='btn bg-green'>Two</button>
</div>

Other

A button inside some copy.

A disabled button.