About
Foundations
Components
Templates
Button
Use buttons to signal actions.

Basic Buttons

A button can contain text. Although any tag can be used for a button, it will only be keyboard focusable if you use a button tag or you add the property tabindex="0".

Default Button
draft
<a href="javascript:void(0)" class="button">Default Button</a>
Disabled Button
draft
<a href="javascript:void(0)" class="button button_disabled">Disabled Button</a>

A button can be disabled, pointer events will not occur.

Button Block
draft
<a href="javascript:void(0)" class="button button_block">Block Button</a>

A button can be made to fill its parent.

Advanced Buttons

Animated Button
planned
<a href="javascript:void(0)" class="button button_animated alt">
  <div class="visible-content">Checkout</div>
  <div class="hidden-content">Buy Now</div>
</a>

A button can be animated to show hidden content. Note the button will be sized according to the visible content. Make sure there is enough room for the hidden content to show.