1 Buttons
Button styles can be applied to anything with the .btn class applied.
However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
1.1 Base styles & states
Hover state.
Active state.
Disabled button. If you use <button> element, that is acceptable to add disabled attribute instead.
<button type="submit" class="btn btn-primary {$modifiers}">Button</button>
<button type="submit" class="btn {$modifiers}">Button</button>1.2 Sizing
Fancy larger or smaller buttons?
Add .btn-large, .btn-small, or .btn-mini for additional sizes.
Large button.
Small button.
Mini button.
Block level button.
<button type="submit" class="btn btn-primary {$modifiers}">Button</button>
<button type="submit" class="btn {$modifiers}">Button</button>1.3 Skins
Use the .btn class on an <a>, <button>, or <input> element.
Provides extra visual weight and identifies the primary action in a set of buttons.
Used as an alternative to the default styles.
Indicates a successful or positive action.
Indicates caution should be taken with this action.
Indicates a dangerous or potentially negative action.
Alternate dark gray button, not tied to a semantic action or use.
Deemphasize a button by making it look like a link while maintaining button behavior.
<a href="#" class="btn {$modifiers}">Link</a>
<button type="submit" class="btn {$modifiers}">Button</button>
<input type="submit" class="btn {$modifiers}" value="Input:submit" />
<input type="button" class="btn {$modifiers}" value="Input:button" />