Buttons

There are a number of standardized buttons at your disposal when using the Core styles. Depending on the context and desired purpose, you may use one of the following implementations.

I am a flashy button just waiting to be clicked
  1. Elements
  2. Button Sizes
  3. Button Types
  4. Disabling Buttons
  5. Buttons with Icons
  6. Button Widths
  7. State-bound Buttons

Elements

Buttons can be made from

  • Button elements (<button>),
  • Links (<a>), and
  • form submit buttons (<input type="submit" />).
Same button, different elements
<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.)

Same button, different sizes
<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.

Standard button types
<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.

Transparent button
(Positioned over image for demonstrational purposes)
<button class="button-transparent">
    Transparent button
</button>
Source

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.

Disabled buttons
<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.

Disabled form button
<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.

Buttons with icons
<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>

More examples:

Give us your money! Go get coffee, this may take a while I can see you…

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.

Wide button
<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).

State-bound buttons
(Resize browser window to see them change.)
<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>