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|
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
.disabled class to
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.