About
Atoms
Molecules
Organisms
Inputs
How we can information into the system.

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
ready
<a href="javascript:void(0)" class="button">Default Button</a>
Disabled Button
ready
<a href="javascript:void(0)" class="button button_disabled">Disabled Button</a>

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

Button Block
ready
<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
ready
<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.