Toggle Switch

designed by Clément Menant and Loïc Goyet for AppVentus

This is some css that allow you to style (in CSS3 and HTML5) the input type=checkbox elements as a toggle switch

Dependencies Required

no dependencies required

Available for

CSS LESS

Getting Started

To enjoy it just link to your template or to your stylesheet the css/style.css file.

You can also use the less file available at less/style.less. With this file you can overide easily customize the Less variables listed below in order to define colors, sizes and more.

In order to avoid the animation behave on load, don't forget to include the jquery.preload.js script (located at /js), and add and .preload class to you body

Bower usage

Install and manage Toggle Switch using Bower.

$ bower install toggle-switch

Less Variables

The variables are divided in two categories, the modules and the themes. The module variables change the structure and the behave of the component in your template. The theme just change the look without size or layout consequences. Those two kinds of variables are called parameters and you can find them in /less/parameters

  • M @toggle-switch-container_width: 50px
  • M @toggle-switch-container_height: 30px
  • M @toggle-switch-container_borderWidth: 0
  • T @toggle-switch-container_backgroundColor: #5e5d5d
  • T @toggle-switch-container_backgroundColor-_checked: #e36566
  • T @toggle-switch-container_borderColor: transparent
  • T @toggle-switch-container_boxShadow: 0
  • T @toggle-switch_opacity-_disabled: 0.25
  • T @toggle-switch-container_transitionDuration: 100ms
  • T @toggle-switch-container_transitionAnimation: ease
  • M @toggle-switch-button_margin: 2px
  • M @toggle-switch-button_widthDiff-_transition: 10px
  • T @toggle-switch-button-backgroundColor: white
  • T @toggle-switch-button_boxShadow: 0 2px 5px 0 fade(#333, 25%)
  • T @toggle-switch-button_animationDuration: 500ms
  • M @toggle-switch-label_marginLeft: 10px
  • M @toggle-switch-label_marginRight: 0
Toggle switch normal
input class=toggle-switch id=example-1 type=checkbox
label for=example-1Labellabel
Toggle switch checked
input class=toggle-switch id=toggle-switch-example-2 type=checkbox checked
label for=toggle-switch-example-2Labellabel
Toggle switch disabled
input class=toggle-switch id=toggle-switch-example-3 type=checkbox disabled
label for=toggle-switch-example-3Labellabel
Toggle switch disabled & checked
input class=toggle-switch id=toggle-switch-example-4 type=checkbox disabled checked
label for=toggle-switch-example-4Labellabel

with love from Nantes