Button Large Button Small Button Disabled Button Button with Icon Split Button
Default Default Default Default Default
Primary Primary Primary Primary Primary
Info Info Info Info Info
Success Success Success Success Success
Warning Warning Warning Warning Warning
Danger Danger Danger Danger Danger
Inverse Inverse Inverse Inverse Inverse
Buttons

Flat Buttons

  1. <a href="#" class="button button-rounded button-flat-primary">press me</a>
  2. <a href="#" class="button button-pill button-flat-primary">press me</a>
  3. <a href="#" class="button button-flat-primary">press me</a>
  4. <a href="#" class="button button-circle button-flat-primary">press me</a>

Icon Buttons (icons provided by Font Awesome. View the full list of icons)

  1. <a href="#" class="button button-rounded button-flat"><i class="icon-github"></i></i> press me</a>
  2. <a href="#" class="button button-rounded button-flat-primary"><i class="icon-refresh"></i> press me</a>
  3. <a href="#" class="button button-rounded button-flat-action"><i class="icon-cloud"></i> press me</a>
  4. <a href="#" class="button button-rounded button-flat-highlight"><i class="icon-camera"></i> press me</a>
  5. <a href="#" class="button button-rounded button-flat-caution"><i class="icon-code"></i> press me</a>
  6. <a href="#" class="button button-rounded button-flat-royal"><i class="icon-envelope-alt"></i> press me</a>

Glow Buttons

  1. <a href="#" class="button glow button-rounded button-flat">press me</a>
  2. <a href="#" class="button glow button-rounded button-flat-primary">press me</a>
  3. <a href="#" class="button glow button-rounded button-flat-action">press me</a>
  4. <a href="#" class="button glow button-rounded button-flat-highlight">press me</a>
  5. <a href="#" class="button glow button-rounded button-flat-caution">press me</a>
  6. <a href="#" class="button glow button-rounded button-flat-royal">press me</a>

Rounded Buttons

  1. <a href="#" class="button button-rounded">press me</a>
  2. <a href="#" class="button button-rounded button-primary">press me</a>
  3. <a href="#" class="button button-rounded button-action">press me</a>
  4. <a href="#" class="button button-rounded button-highlight">press me</a>
  5. <a href="#" class="button button-rounded button-caution">press me</a>
  6. <a href="#" class="button button-rounded button-royal">press me</a>

Pill Buttons

  1. <a href="#" class="button button-pill">press me</a>
  2. <a href="#" class="button button-pill button-primary">press me</a>
  3. <a href="#" class="button button-pill button-action">press me</a>
  4. <a href="#" class="button button-pill button-highlight">press me</a>
  5. <a href="#" class="button button-pill button-caution">press me</a>
  6. <a href="#" class="button button-pill button-royal">press me</a>

Square Buttons

  1. <a href="#" class="button">press me</a>
  2. <a href="#" class="button button-primary">press me</a>
  3. <a href="#" class="button button-action">press me</a>
  4. <a href="#" class="button button-highlight">press me</a>
  5. <a href="#" class="button button-caution">press me</a>
  6. <a href="#" class="button button-royal">press me</a>

Circle Buttons

  1. <a href="#" class="button button-circle">press me</a>
  2. <a href="#" class="button button-circle button-primary">press me</a>
  3. <a href="#" class="button button-circle button-action">press me</a>
  4. <a href="#" class="button button-circle button-highlight">press me</a>
  5. <a href="#" class="button button-circle button-caution">press me</a>
  6. <a href="#" class="button button-circle button-royal">press me</a>

Block Buttons

  1. <a href="#" class="button button-block button-rounded button-primary button-large">press me</a>

Button Sizes

  1. <a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
  2. <a href="#" class="button button-rounded button-flat-primary">press me</a>
  3. <a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
  4. <a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

Button Wrappers

  1. <span class="button-wrap"><a href="#" class="button button-circle">press me</a></span>
  2. <span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span>
  3. <span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span>
  4. <span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span>

Form Elements Work Too

  1. <input type="submit" value="press me" class="button button-pill button-primary"/>
  2. <button class="button button-pill button-primary">press me</button>
  3.  
  4. <!-- DISABLED BUTTONS -->
  5. <input disabled type="submit" value="press me" class="button button-pill button-primary"/>
  6. <button disabled class="button button-pill button-primary">press me</button>
  7. <a href="#" class="button disabled button-pill button-primary">press me</a>

Ladda

A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example.

expand-left

expand-right

expand-up

expand-down

contract

contract-overlay

zoom-in

zoom-out

slide-left

slide-right

slide-up

slide-down

Built-in progress bar

expand-right

contract