<a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>
<input type="button" class="button {$modifiers}" value="input[type='button']"/>

[.primary] Indicate that the button is the primary feature of this form.

<a href="#" class="button primary">Link Button</a>
<button class="button primary">Button Element</button>
<input type="button" class="button primary" value="input[type='button']"/>

[.remove] Indicate that the button will remove a feature, or other negative connotations.

<a href="#" class="button remove">Link Button</a>
<button class="button remove">Button Element</button>
<input type="button" class="button remove" value="input[type='button']"/>

[:hover] Highlight the button when hovered.

<a href="#" class="button pseudo-class-hover">Link Button</a>
<button class="button pseudo-class-hover">Button Element</button>
<input type="button" class="button pseudo-class-hover" value="input[type='button']"/>

[:disabled] Make the button change appearance to reflect it being disabled.

<a href="#" class="button pseudo-class-disabled">Link Button</a>
<button class="button pseudo-class-disabled">Button Element</button>
<input type="button" class="button pseudo-class-disabled" value="input[type='button']"/>

[:active] "Press" the button down when clicked.

<a href="#" class="button pseudo-class-active">Link Button</a>
<button class="button pseudo-class-active">Button Element</button>
<input type="button" class="button pseudo-class-active" value="input[type='button']"/>

<input type="text" class="{$modifiers}" value="Text"/>

[:hover] Highlight the text box when hovering.

<input type="text" class="pseudo-class-hover" value="Text"/>

[:focus] Similar to :hover, however it should demand more attention than when an input is simply hovered.

<input type="text" class="pseudo-class-focus" value="Text"/>

[:disabled] When disabled, the input's appearance should reflect as such.

<input type="text" class="pseudo-class-disabled" value="Text"/>

<div class="mod-input text {$modifiers}">
     <label>Text Label</label>
     <input type="text" value="Text Input"/>
</div>

[.disabled] To be used when the text input inside is expected to be disabled.

<div class="mod-input text disabled">
     <label>Text Label</label>
     <input type="text" value="Text Input"/>
</div>

[.invalid] To be used if the input has failed a validation check.

<div class="mod-input text invalid">
     <label>Text Label</label>
     <input type="text" value="Text Input"/>
</div>

[.valid] To be used if the input has passed a validation check (intended for live validation in particular).

<div class="mod-input text valid">
     <label>Text Label</label>
     <input type="text" value="Text Input"/>
</div>