Menu

Button

beta

Use buttons to signal actions.

Style Location: /_scss/components/buttons.scss

Code

<h6>Text Links</h6>

<p><a href="#">Click here</a> <a href="#" class="alt">Cancel</a></p>

<h6>Button, Icon Button, Alt Button</h6>
<a href="#" class="button">Default Button</a>
<a href="#" class="button-icon alt"><i class="fa fa-home"></i></a>

<h6>Button (Animated)</h6>
<a href="#" class="button button_animated">
  <div class="visible-content">Next</div>
  <div class="hidden-content"><i class="fa fa-arrow-right"></i></div>
</a>
<a href="#" class="button button_animated alt">
  <div class="visible-content">Checkout</div>
  <div class="hidden-content"><i class="fa fa-shopping-cart"></i></div>
</a>

<h6>Disabled</h6>
<a href="#" class="button button_disabled">Disabled Button</a>


<h6>Button Block</h6>
<a href="#" class="button button_block">Block Button</a>


<h6>Button Group</h6>
<div class="button-group">
  <a href="#" class="button">One</a>
  <a href="#" class="button">Two</a>
  <a href="#" class="button alt">Three</a>
</div>

Documentation

General

A standard button, it can contain text or icons. 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". Keyboard accessible buttons will preserve focus styles after click, which may be visually jarring.

Disabled

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

Block

A button can be made to fill its parent.

Animated

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.