iOS Style Pure CSS Switch Buttons – iOS Switcher

Preview:

Description:

iOS Switcher uses Bootstrap grid styles and Html/CSS to create smooth, iOS-style switches with gooey effect.

How to use it:

Add both Bootstrap’s stylesheet and the switcher.css into your html page.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="dist/css/switcher.css">

Create a large switch from regular checkbox and label elements like this:

<div class="form-switcher form-switcher-lg form-switcher-sm-phone">
  <input type="checkbox" name="switcher-lg" id="switcher-lg">
  <label class="switcher" for="switcher-lg"></label>
</div>

CSS modifiers.

• form-switcher-lg: large
• form-switches-sm: small
• form-switcher-lg-tablet: large size in tablet
• form-switcher-md-tablet: medium size in tablet
• form-switcher-sm-tablet: small size in tablet