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

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.

Primary link

Link


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.

Link
  1. <aclass=“btn”href=“”>Link</a>
  2. <buttonclass=“btn”type=“submit”>
  3. Button
  4. </button>
  5. <inputclass=“btn”type=“button”
  6. value=“Input”>
  7. <inputclass=“btn”type=“submit”
  8. 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.