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.
- Elements
- Button Sizes
- Button Types
- Disabling Buttons
- Buttons with Icons
- Button Widths
- State-bound Buttons
Elements
Buttons can be made from
- Button elements (
<button>
), - Links (
<a>
), and - form submit buttons (
<input type="submit" />
).
<a href="#" class="button"> I am an <a> </a>
<a href="#" class="button"> I am an <a> </a>
<button class="button"> I am a <button> </button>
<button class="button"> I am a <button> </button>
<input type="submit" class="button" value="I am an <input>" />
<input type="submit" class="button" value="I am an <input>" />
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.
(Note that anything past the medium font size should be justified to both your resident designer and common sense. )
<button class="button-secondary font-xs"> Tiny-sized </button>
<button class="button-secondary font-xs"> Tiny-sized </button>
<button class="button-secondary"> Standard-sized </button>
<button class="button-secondary"> Standard-sized </button>
<button class="button-secondary font-xxl"> CLICK ME! </button>
<button class="button-secondary font-xxl"> CLICK ME! </button>
When used in standard forms (within form
elements), buttons will be sized slightly differently to
go along with the height of an input field of the same font size.
Please note that this works only for button elements (<button>
) and submit buttons (<input type="submit" />
).
Button Types
There are three predefined button types that you can choose from. The two more flashy ones (button-primary
and button-secondary
) are generally for “calls to action” to guide the user, while the standard white button
(button
) can be used for regular interactive elements.
Please note that there should generally only ever be one primary button on a page to highlight the most important call to action.
<button class="button-primary"> Primary button </button>
<button class="button-primary"> Primary button </button>
<button class="button-secondary"> Secondary button </button>
<button class="button-secondary"> Secondary button </button>
<button class="button"> Regular button </button>
<button class="button"> Regular button </button>
Disabling Buttons
You can make buttons look disabled to show the user that they are temporarily inactive by appending the
disabled
class.
<button class="button-primary disabled">Inactive button</button> <button class="button-secondary disabled">Inactive button</button> <button class="button disabled">Inactive button</button>
<button class="button-primary disabled">Inactive button</button> <button class="button-secondary disabled">Inactive button</button> <button class="button disabled">Inactive button</button>
In HTML5, submit buttons, like other form inputs, can also be semantically disabled through the disabled
attribute,
making them unclickable and showing their inactive states.
<input type="submit" class="button" value="Inactive submit button" disabled />
<input type="submit" class="button" value="Inactive submit button" disabled />
Buttons with Icons
Buttons can be decorated with icons 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"> <span class="fa fa-angle-left"></span> Go back </a>
<a href="#" class="button"> <span class="fa fa-angle-left"></span> Go back </a>
<a href="#" class="button"> <span class="fa fa-comments"></span> Leave a comment </a>
<a href="#" class="button"> <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.
<input type="text" class="input-text margin-bottom-xs one-whole" placeholder="Some input" /> <button class="button-primary one-whole"> Wiiide button </button>
<input type="text" class="input-text margin-bottom-xs one-whole" placeholder="Some input" /> <button class="button-primary 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-primary
).
(Resize browser window to see them change.)
<a href="#" class="palm-button-secondary"> Button on palm-sized devices </a>
<a href="#" class="palm-button-secondary"> Button on palm-sized devices </a>
<a href="#" class="lap-button-secondary"> Button on lap-sized devices </a>
<a href="#" class="lap-button-secondary"> Button on lap-sized devices </a>
<a href="#" class="palm-button lap-button-secondary"> Button on palm-sized and lap-sized devices </a>
<a href="#" class="palm-button lap-button-secondary"> Button on palm-sized and lap-sized devices </a>