Buttons

Bootsnip

Good.

Nice Custom

Nice and readable. But you have to add css. Useful in case of need for a special nice looking custom button.

Button Maker

An option. Not the best.

Stand Alone Buttons – A CSS button library built with Sass and Compass

Default Primary Info Success Warning Danger Inverse Button without button styling

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-inverse">Inverse</button>
<button type="button" class="btn btn-link">Button without button styling</button>

Button sizes

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

<p>
  <button type="button" class="btn btn-large btn-primary">Large button</button>
  <button type="button" class="btn btn-large">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-small btn-primary">Small button</button>
  <button type="button" class="btn btn-small">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
  <button type="button" class="btn btn-mini">Mini button</button>
</p>

press me press me press me press me

<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-pill button-flat-primary">press me</a>
<a href="#" class="button button-flat-primary">press me</a>
<a href="#" class="button button-circle button-flat-primary">press me</a>

  <ul>
  <li><a href="#" class="button button-rounded button-flat">press me</a></li>
  <li><a href="#" class="button button-rounded button-flat-primary">press me</a>  </li>
  <li><a href="#" class="button button-rounded button-flat-action">press me</a>   </li>
  <li><a href="#" class="button button-rounded button-flat-highlight">press me</a></li>
  <li><a href="#" class="button button-rounded button-flat-caution">press me</a>  </li>
  <li><a href="#" class="button button-rounded button-flat-royal">press me</a>  </li>
</ul>
<ul>
  <li><a href="#" class="button button-pill button-flat">press me</a></li>
  <li><a href="#" class="button button-pill button-flat-primary">press me</a>  </li>
  <li><a href="#" class="button button-pill button-flat-action">press me</a>   </li>
  <li><a href="#" class="button button-pill button-flat-highlight">press me</a></li>
  <li><a href="#" class="button button-pill button-flat-caution">press me</a>  </li>
  <li><a href="#" class="button button-pill button-flat-royal">press me</a>  </li>
</ul>
<ul>
  <li><a href="#" class="button button-flat">press me</a></li>
  <li><a href="#" class="button button-flat-primary">press me</a>  </li>
  <li><a href="#" class="button button-flat-action">press me</a>   </li>
  <li><a href="#" class="button button-flat-highlight">press me</a></li>
  <li><a href="#" class="button button-flat-caution">press me</a>  </li>
  <li><a href="#" class="button button-flat-royal">press me</a>  </li>
</ul>
<ul>
  <li><a href="#" class="button button-circle button-flat">press me</a></li>
  <li><a href="#" class="button button-circle button-flat-primary">press me</a>  </li>
  <li><a href="#" class="button button-circle button-flat-action">press me</a>   </li>
  <li><a href="#" class="button button-circle button-flat-highlight">press me</a></li>
  <li><a href="#" class="button button-circle button-flat-caution">press me</a>  </li>
  <li><a href="#" class="button button-circle button-flat-royal">press me</a>  </li>
</ul>

<div class="row-fluid">
  <div class="span6">
    <div class="well" style="">
      <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
      <button type="button" class="btn btn-large btn-block">Block level button</button>
    </div>
  </div>
  <div class="span6">
    <div class="well" style="max-width: 300px; margin: 0 auto 10px;">
      <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
      <button type="button" class="btn btn-large btn-block">Block level button</button>
    </div>
  </div>
</div>

Disabled button Disabled button

Button groups

Button dropdown menus

Split button dropdowns

Button sizes

Dropup menus