Button styles can be applied to anything with the
.btn class applied. However, typically you'll want to apply these to only
<button> elements for the best rendering.
||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|
||Deemphasize a button by making it look like a link while maintaining button behavior|
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 additional sizes.
Create block level buttons—those that span the full width of a parent— by adding
Make buttons look unclickable by fading them back 50%.
.disabled class to
Heads up! We use
.disabled as a utility class here, similar to the common
disabled attribute to
.btn class on an
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an
input, use an
<input type="submit"> for your button.