||Standard gray button with gradient|
||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|
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
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.
Fancy larger or smaller buttons? Add
.btn-mini for two additional sizes.
For disabled buttons, add the
.disabled class to links and the
disabled attribute for
Heads up! We use
.disabled as a utility class here, similar to the common
.active class, so no prefix is required.
.btn class on an
<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.