Buttons

Default buttons

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 for the best rendering.

Buttonclass=""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
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

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.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

  1. <p>
  2. <buttonclass="btn btn-large btn-primary"type="button">Large button</button>
  3. <buttonclass="btn btn-large"type="button">Large button</button>
  4. </p>
  5. <p>
  6. <buttonclass="btn btn-primary"type="button">Default button</button>
  7. <buttonclass="btn"type="button">Default button</button>
  8. </p>
  9. <p>
  10. <buttonclass="btn btn-small btn-primary"type="button">Small button</button>
  11. <buttonclass="btn btn-small"type="button">Small button</button>
  12. </p>
  13. <p>
  14. <buttonclass="btn btn-mini btn-primary"type="button">Mini button</button>
  15. <buttonclass="btn btn-mini"type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <buttonclass="btn btn-large btn-block btn-primary"type="button">Block level button</button>
  2. <buttonclass="btn btn-large btn-block"type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

  1. <ahref="#"class="btn btn-large btn-primary disabled">Primary link</a>
  2. <ahref="#"class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

  1. <buttontype="button"class="btn btn-large btn-primary disabled"disabled="disabled">Primary button</button>
  2. <buttontype="button"class="btn btn-large"disabled>Button</button>

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">Button</button>
  3. <inputclass="btn"type="button"value="Input">
  4. <inputclass="btn"type="submit"value="Submit">

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.