Examples
Default styling
.c-button--blue
This is the most common variation of the button. This should be used on all of the submit buttons.
.c-button--blue:hover
The colors invert while the button is being hovered.
.c-button--grey
This variation should be used on secondary buttons.
.c-button--grey:hover
The colors invert while the button is being hovered.
.c-button--with-arrow
This variation is used on links.
Markup: components/buttons/buttons.twig
<a href="#" class="c-button {{modifier_class}}">Link Button</a>
<button class="c-button {{modifier_class}}">Button Element</button>
<input type="button" class="c-button {{modifier_class}}" value="input[type='button']"/>
Source:
components/buttons/buttons.scss
, line 4