Buttons


Markup

<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">

Semantic 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-secondary Provides extra visual weight and identifies the secondary action in a set of buttons
btn btn-tertiary Provides extra visual weight and identifies the tertiary 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

Button Sizes


Disabled State

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.


Dropdown Markup

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Split Button Markup

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>