CSS Toggle Switch

You can use the switches standalone, with Bootstrap or with Foundation.

Light switch

Use the light switch, instead of a checkbox, for simple “On/Off” options.

<label class="switch-light well" onclick="">
  <input type="checkbox">
  <span>
    Wireless
    <span>Off</span>
    <span>On</span>
  </span>

  <a class="btn btn-primary"></a>
</label>

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more specific options.

<label>View</label>
<div class="switch-toggle well">
  <input id="week" name="view" type="radio" checked>
  <label for="week" onclick="">Week</label>

  <input id="month" name="view" type="radio">
  <label for="month" onclick="">Month</label>

  <a class="btn btn-primary"></a>
</div>

Multiple options

You can add up to 5 items by using the .switch-3, .switch-4 and .switch-5 classes.

<label>View</label>
<div class="switch-toggle switch-5 well">
  […]

Different looks

The switches are very flexible, so you can use and combine a number of classes provided by Bootstrap, along with it's grid, to make them look exactly like you need them.

Get Bootstrap.