1.1 #Atoms.Buttons Buttons

Toggle example guides Toggle HTML markup

Base class for buttons. All majority of buttons in the site are built from the same base class.

Examples
Default styling
:hover
Highlight the button text when hovered
:focus
Highlight the button when focused
:disabled
Make the button change appearance to reflect it being disabled
.Button--inverted
Inverted button
.Button--large
Larger button
.Button--wide
Wide button
.Button--full
Full width button
.Button--expand
Round expand button
.Button--expand:focus
Focus expand button
Markup
<button class="Button [modifier class]">Button</button>
Source: components/atoms/button.less, line 9