Skip to content
Clean Switch - Material Inspired Pure CSS toggle switch
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
clean-switch.css Add iOS Style Nov 22, 2018


Clean Switch - Material Inspired Pure CSS toggle switch


Clean switch is just a lightweight pure css toggle switch. witch is simillar to Material Design lite switch(MDL) But in pure css and better syntax and no dependency

How to use

First copy clean-switch.css in your project. then link it to your project HTML file

<link rel="stylesheet" href="clean-switch.css">

You can also use SCSS file clean-switch.scss

Make HTML switch structure like this. and put it inside forms or anywhere you like and it will behave like checkboxes.

<label class="cl-switch">
    <input type="checkbox" >
    <span class="switcher"></span>
    <span class="label">this is label</span>

Diffrent Sizes

To adjust size of switch just add classes to the list of classes in switch ellement

<label class="cl-switch cl-switch-large">
    <input type="checkbox" >
    <span class="switcher"></span>
    <span class="label">this is large switch</span>

size classes are:

  • cl-switch-large
  • cl-switch-xlarge


to make a switch disable simply add disabled attribute to checkbox

<label class="cl-switch">
	<input type="checkbox" disabled>
	<span class="switcher"></span>
	<span class="label">Disabled</span>

Diffrent Colors

To adjust color of the switch just add classes to the list of classes in switch ellement

<label class="cl-switch cl-switch-red">
    <input type="checkbox" >
    <span class="switcher"></span>
    <span class="label">this is red switch</span>

color classes are:

  • cl-switch-black
  • cl-switch-red
  • cl-switch-green
  • cl-switch-orange

Custom Colors

For Some projects you will need custom color so you can do it with small CSS

1- first you should add a class to class list of cl-switch in this example its custom-class

<label class="cl-switch custom-class">
    <input type="checkbox" >
    <span class="switcher"></span>
    <span class="label">this is custom color switch</span>

2- then you should adjust its color in your css that is loaded after cl-switch css

.custom-class input[type="checkbox"]:checked + .switcher {
  background: #c06651; /*this is body of switch that should be lighter color*/
.custom-class input[type="checkbox"]:checked + .switcher:before {
  background: #c0392b; /*this is btn of switch that should be darker color*/

iOS Style

If you are an iOS fan, you can have iOS style too

just add ios class in label class list

all sizing and colors works fine

<label class="cl-switch ios">
	<input type="checkbox">
	<span class="switcher"></span>
	<span class="label">title</span>

licence and cast

MIT Licence

by Milad Dehghan

You can’t perform that action at this time.