Buttons
| Button | class="" | Description |
|---|---|---|
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use |
Get the code
<button class="btn">Default</button><button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-inverse">Inverse</button>
Buttons for actions
As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
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.
Cross browser compatibility
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
Multiple sizes
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.
Disabled state
For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.
Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
One class, multiple tags
Use the .btn class on an <a>, <button>, or <input> element.
<a class="btn" href="/">Link</a>
<button class="btn" type="submit">
Button
</button>
<input class="btn" type="button"
value="Input">
<input class="btn" type="submit"
value="Submit">
As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.