iOS Style Pure CSS Switch Buttons – iOS Switcher

Category: CSS & CSS3 , Form | February 13, 2016
Author:oturra
Views Total:4,882 views
Official Page:Go to website
Last Update:February 13, 2016
License:MIT

Preview:

iOS Style Pure CSS Switch Buttons – iOS Switcher

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

You Might Be Interested In:


Leave a Reply