Button

Basic buttons

success info 

<p>
  <button>default</button>
  <button class="primary">primary</button>
  <a href="#" class="button success">success</a>
  <a href="#" class="button info">info</a>
  <input class="warning" type="button" value="warning" />
  <input class="danger" type="submit" value="danger" />
</p>

Disabled button

success info 
<button disabled="disabled">default</button>
<button disabled="disabled" class="primary">primary</button>
<a href="#" class="button disabled success">success</a>
<a href="#" class="button disabled info">info</a>
<input disabled="disabled" class="warning" type="button" value="warning" />
<input disabled="disabled" class="danger" type="submit" value="danger" />

Group buttons

Left Middle Right 
<div class="buttons">
  <button>Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>
<div class="buttons">
  <a href="#" class="button primary">Left</a>
  <a href="#" class="button primary">Middle</a>
  <a href="#" class="button primary">Right</a>
</div>

Vertically buttons

Top Middle Bottom 
<div class="buttons vertical">
  <button>Top</button>
  <button>Middle</button>
  <button>Bottom</button>
</div>
<div class="buttons vertical">
  <a href="#" class="button primary">Top</a>
  <a href="#" class="button primary">Middle</a>
  <a href="#" class="button primary">Bottom</a>
</div>

Sizing

Mini button

Small button

Default button

Large button 

<p>
  <button class="mini">Mini button</button>
  <a href="#" class="button primary mini">Mini button</a>
</p>
<p>
  <button class="small">Small button</button>
  <a href="#" class="button primary small">Small button</a>
</p>
<p>
  <button>Default button</button>
  <a href="#" class="button primary">Default button</a>
</p>
<p>
  <button class="large">Large button</button>
  <a href="#" class="button primary large">Large button</a>
</p>

Block

Block level button 

<p><button class="block large">Block level button</button></p>
<p><a href="#" class="button primary block large">Block level button</a></p>

Justified

Left Middle Right

Left Middle Right 
<div class="buttons justified">
  <a href="#" class="button">Left</a>
  <a href="#" class="button">Middle</a>
  <a href="#" class="button">Right</a>
</div>
<br />
<div class="buttons justified">
  <a href="#" class="button primary">Left</a>
  <a href="#" class="button primary">Middle</a>
  <a href="#" class="button primary">Right</a>
</div>

With <button> elements


Checkbox & Radio in button

<label class="button">
  <input type="checkbox" name="" value="" />
  Checkbox in button
</label>
<label class="button">
  <input type="radio" name="" value="" />
  Radio in button
</label>