Buttons means buttons! Or does it? Buttons are a visual indication that clicking the item is important, it moves you through a process, or that it performs an action. As such, a button can really be a button, as in a form, or it could be an important link within a page that has had it's importance raised up beyond simple text.
Our button foundation follows Material guidelines as a basis for appearance and functionality.
A rectangular button that whose text lightens on hover.
A flat button is a Material concept for a button which is 'printed' onto the material that it sits on i.e. it has no height. When they are interacted with, they do not lift, but do fill with a colour on hover and on press.
We use flat buttons in the following locations:
When in use as a set of action on cards, the modifier dense
is provided to help align the buttons with the card content.
<button class="button button--flat"></button>
Standard flat buttons have a clear background. A flat button
<button class="button button--flat button--cta"></button>
A flat button can be a call to action, and has the standard call to action colour as a background. Buy now!
<button class="button button--flat button--disabled"></button>
A flat button which is disabled shows a shaded background, and has no interaction styles. Disabled
<button class="button button--flat button--dense"></button>
When buttons are used as actions within a card action area, they can have the modifier
dense applied to them. This aids the alignment with the content
in the main portion of the card.
Dense buttons can still have other relevant modifiers applied to them.
<button class="button button--raised"></button>
A rectangular button that whose text lightens on hover.
A button that has the appearance of standing proud of the material that it sits on. On hover the button lightens. On press and focus, the button depresses back down to a flat state, in ine with the material it sits on.
We use raised buttons in the following locations:
<button class="button button--raised"></button>
Standard raised buttons use the primary brand colour as a background. A raised button
<button class="button button--raised button--cta"></button>
A raised button can be a call to action, and has the standard call to action colour as a background. Buy now! The raised CTA is used to highlight the primary action we want the user to take on the page.
<button class="button button--raised button--disabled"></button>
A flat button which is disabled shows a shaded background, and has no interaction styles. Disabled
<button class="button button--raised button--small"></button>
<button class="button button--raised button--full-width"></button>
By default, cards are sized according to their content. If required, cards can be sized manually.
<button class="button button--raised button--centered"></button>
Buttons can be positioned centrally within a block.
As with the raised buttons, a typically rectangular button that lightens on hover. It has a shadow underneath to add depth and depresses on click and focus. It includes a logo of the brand to the left of the text. Both are centered within the button at all times.
Because button styling is separated from structure, a number of tags can be used to create a button, such a anchor tags, button tags, or input tags.
<a href="#" class="button button--raised"></a>
<button class="button button--raised"></button>
<input type="button" class="button button--raised" value="An input button">
<span class="button button--raised"></span>