kss-node Style Guide

3.3.1 #demo.components.buttons Buttons

Toggle example guides Toggle HTML markup

A majority of buttons in the site are built from the same base class.

Examples
Default styling
Link Button
.primary
Use this class to indicate that the button is the primary feature of this form.
Link Button
.remove
Use this class to indicate that the button will remove a feature, or other negative connotations.
Link Button
:hover
Highlight the button when hovered.
Link Button
:disabled
Make the button change appearance to reflect it being disabled.
Link Button
:active
"Press" the button down when clicked.
Link Button
Markup: components/buttons.hbs
<a href="#" class="button {{modifier_class}}">Link Button</a>
<button class="button {{modifier_class}}">Button Element</button>
<input type="button" class="button {{modifier_class}}" value="input[type='button']"/>
Source: components/buttons.less, line 1