Buttons

Elements

Buttons can be made from

• Button elements (<button>),
• Links (<a>), and
• form submit buttons (<input type="submit" />).

<a href="#" class="button-lightblue">
    I am an &lt;a&gt;
</a>

<button class="button-lightblue">
    I am a &lt;button&gt;
</button>

<input type="submit" class="button-lightblue"
    value="I am an &lt;input&gt;" />

Button Sizes

Buttons grow proportionately to their font size. If you want a larger button, you can combine the button class with one of the font-size classes. (Keep in mind that larger fonts should usually come with a different font family.)

<button class="button-orange">
    Standard-sized
</button>

<button class="button-orange font-l font-headline">
    Large
</button>

<button class="button-orange font-xxl font-headline">
    CLICK ME!
</button>

Button Types

There are three predefined button types that you can choose from. The two more flashy ones (button-orange and button-darkblue) are generally for “calls to action” to guide the user, while the more subtle light blue button (button-lightblue) can be used to designate a secondary option.

<button class="button-orange">
    Orange button
</button>

<button class="button-darkblue">
    Dark blue button
</button>

<button class="button-lightblue">
    Light blue button
</button>

There is also a transparent button that can be used on advertisements with a strong focus on images.

<button class="button-transparent">
    Transparent button
</button>

Disabling Buttons

Buttons can be made to look disabled whenever a link should be unclickable or a form submit button should be inactive, etc.

You can (visually) disable buttons by appending the class disabled.

<button class="button-orange">
    Active button
</button>
<button class="button-orange disabled">
    Inactive button
</button>

<button class="button-darkblue">
    Active button
</button>
<button class="button-darkblue disabled">
    Inactive button
</button>

<button class="button-lightblue">
    Active button
</button>
<button class="button-lightblue disabled">
    Inactive button
</button>

In HTML5, submit buttons, like other form inputs, can also be semantically disabled, making them unclickable and showing their inactive states.

<input type="submit" class="button-lightblue"
    value="Active submit button" />
<input type="submit" class="button-lightblue"
    value="Inactive submit button" disabled />

Buttons with Icons

Buttons can be decorated with icons by using the FontAwesome type face integrated in the Core style set. This allows you to build buttons with a wide range of contextual icons on demand without the need to have a specific button designed and implemented.

<a href="#" class="button-lightblue">
  <span class="fa fa-caret-left"></span>
  Go back
</a>

<a href="#" class="button-lightblue">
  <span class="fa fa-comments"></span>
  Leave a comment
</a>

Please note that icons are only available on buttons that are based on <a> or <button> elements.
<input> buttons (as in form submits) cannot have icons due to technological limitations of the <input> element.

Button Widths

By default, buttons will be just as wide as they need to be for the text to fit. However, if they directly follow blocky elements, it may be desirable to have them aligned on both sides with the preceding element.

In such cases, you can use the width classes as you would on any other element. The button will then be inflated to the specified size, while the text will stay centered.

<button class="button-orange font-bold one-whole">
    Wiiide button
</button>

State-bound Buttons

Depending on how layouts behave on different viewports, you may want a link to appear as a normal text link in some states, and as a button in others.

You can achieve this by adding one of the standard state prefixes (palm-, lap-, desk-) to the respective button class (e.g. palm-button-orange).

<a href="#" class="palm-button-lightblue">
    Catch me!
</a>

<a href="#" class="lap-button-lightblue">
    Me too!
</a>

<a href="#" class="desk-button-lightblue">
    No, the other one!
</a>

<a href="#" class="lap-button-lightblue desk-button-lightblue">
    Huh?
</a>