Buttons

Use the button class for a default button appearance with optional button-secondary modifier class.

<a href="#" class="button">Link</a>
<button class="button">Button</button>
<input type="button" value="Input" class="button">
<input type="submit" value="Submit" class="button">
<button class="button button--secondary">button secondary</button>

Button sizes

Additional sizes? Add the optional button--small modifier class.

button small button small

<a href="#" class="button button--small">button small</a>
<a href="#" class="button button--small button--secondary">button small</a>

Create block level buttons, those that span the full width of a parent by adding the optional button--block modifier class.

button block button block

<a href="#" class="button button--block">button block</a>
<a href="#" class="button button--block button--secondary">button block</a>

Disabled buttons

For disabled (unclickable) apperance use disabled attribute for button elements and button--disabled modifier for links.

button small

<a href="#" class="button button--disabled">button small</a>
<button class="button" disabled>Button</button>
<input type="button" value="Input" class="button" disabled>
<input type="submit" value="Submit" class="button" disabled>
<button class="button button--secondary" disabled>button secondary</button>