Buttons

Use button classes on an <a>, <button>, or button-like <input> elements for consistent cross-browser styling.

<div class="btn-group">
  <a class="btn" href="#" role="button">Anchor</a>
  <button class="btn" type="submit">Button</button>
  <input class="btn" type="button" value="Input">
  <input class="btn" type="submit" value="Submit">
</div>

Button colours

Use contextual button classes to quickly create buttons with meaning.

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn--info">Info</button>
<button type="button" class="btn btn--warning">Warning</button>
<button type="button" class="btn btn--success">Success</button>
<button type="button" class="btn btn--danger">Danger</button>

Active state

Buttons will appear pressed when active. For <button> elements, this is done via :active. For <a> elements, it’s done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state.

<button type="button" class="active btn">Default</button>
<button type="button" class="active btn btn--info">Info</button>
<button type="button" class="active btn btn--warning">Warning</button>
<button type="button" class="active btn btn--success">Success</button>
<button type="button" class="active btn btn--danger">Danger</button>

Disabled state

Make buttons look unclickable by reducing opacity and disabling pointer events. by adding a .disabled class to <a> buttons.

<button type="button" class="disabled btn">Default</button>
<button type="button" class="disabled btn btn--info">Info</button>
<button type="button" class="disabled btn btn--warning">Warning</button>
<button type="button" class="disabled btn btn--success">Success</button>
<button type="button" class="disabled btn btn--danger">Danger</button>

Button sizing

Need a bigger button on the odd occasion? Add .btn--lg, or . btn--sm and get proportionally scaled buttons, that don’t nuke your vertical rhythym, automagically.

<p>
  <button type="button" class="btn btn--sm">Small button</button>
</p>

<p>
  <button type="button" class="btn btn--lg">Large button</button>
</p>

You can make any button span the full width of its parent element by adding .btn btn--natural.

<button type="button" class="btn btn--lg btn--natural">Block level button</button>