Currently v

Download Github

Default

A Button 
<a href="#" class="button">A Button</a>

Sizes

The default button is set to 1em; extending the size is available via the size property. There are 6 different sizes, including the default size: x-small, small, default, medium, large and x-large. Increasing the size, or flat out changing the sizes can be accomplished by updating the sizes mixin with a map of 6 sizes.

X-Large Button Large Button Medium Button Default Button Small Button X-Small Button 
<a href="#" class="button" size="xlarge">X-Large Button</a>
<a href="#" class="button" size="large">Large Button</a>
<a href="#" class="button" size="medium">Medium Button</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button" size="small">Small Button</a>
<a href="#" class="button" size="xsmall">X-Small Button</a>

Modifiers

The default button is set to 1em; extending the size is available via the size property. There are 6 different sizes, including the default size: x-small, small, default, medium, large and x-large. Increasing the size, or flat out changing the sizes can be accomplished by updating the sizes mixin with a map of 6 sizes.

Block

Save Submit Cancel Sign Up 
<a href="#" class="button" size="small" modifier="full" theme="black">Save</a>
<a href="#" class="button" size="medium" modifier="full" theme="white">Submit</a>
<a href="#" class="button" modifier="full" theme="gray">Cancel</a>
<a href="#" class="button" size="large" modifier="full" theme="blue">Sign Up</a>

Square

Save Submit Cancel 
<a href="#" class="button" size="small" modifier="square full" theme="black">Save</a>
<a href="#" class="button" size="medium" modifier="square border" theme="white">Submit</a>
<a href="#" class="button" modifier="square" theme="gray">Cancel</a>

Oval

Save Submit Cancel 
<a href="#" class="button" size="small" modifier="oval full" theme="black">Save</a>
<a href="#" class="button" size="medium" modifier="oval border" theme="white">Submit</a>
<a href="#" class="button" modifier="oval" theme="gray">Cancel</a>

Bordered

Save Submit Cancel Sign Up 
<a href="#" class="button" size="small" modifier="border full" theme="black">Save</a>
<a href="#" class="button" size="medium" modifier="border square" theme="white">Submit</a>
<a href="#" class="button" modifier="border oval" theme="gray">Cancel</a>
<a href="#" class="button" size="large" modifier="border" theme="blue">Sign Up</a>

Themes

Black

A button link View on github Download .zip Sign Up ▸ 
<a href="#" class="button" theme="black">A button link</a>
<a href="#" class="button" modifier="oval" theme="black">View on <b>github</b></a>
<a href="#" class="button" modifier="square" theme="black">Download <b>.zip</b></a>
<a href="#" class="button" modifier="border" theme="black">Sign Up ▸</a>

Blue

A button link View on github Download .zip Sign Up ▸ 
<a href="#" class="button" theme="blue">A button link</a>
<a href="#" class="button" modifier="oval" theme="blue">View on <b>github</b></a>
<a href="#" class="button" modifier="square" theme="blue">Download <b>.zip</b></a>
<a href="#" class="button" modifier="border" theme="blue">Sign Up ▸</a>

Grayscale

A button link View on github Download .zip Sign Up ▸ 
<a href="#" class="button" theme="gray">A button link</a>
<a href="#" class="button" modifier="oval" theme="gray">View on <b>github</b></a>
<a href="#" class="button" modifier="square" theme="gray">Download <b>.zip</b></a>
<a href="#" class="button" modifier="border" theme="gray">Sign Up ▸</a>