A Pen by jupegarnica.

index.html

<div class="wrap">
  
  <input type="checkbox" id="s1" />
  <label class="slider-v1" for="s1"></label>

  <input type="checkbox" id="s2" checked="" />
  <label class="slider-v1" for="s2"></label>
  
</div><!--/wrap-->
<div class="wrap">
  
  <input type="checkbox" id="s3" />
  <label class="slider-v2" for="s3"></label>
  
  <input type="checkbox" id="s4" checked="" />
  <label class="slider-v2" for="s4"></label>
  
</div><!--/wrap-->
<div class="wrap">
  
  <input type="checkbox" id="s5" />
  <label class="slider-v3" for="s5"></label>
  
  <input type="checkbox" id="s6" checked="" />
  <label class="slider-v3" for="s6"></label>
  
</div><!--/wrap-->

style.scss

@import "compass";
html,body { height:100% }
body { background:linear-gradient(#f7f7f7,#e0e0e0); margin:0 }
.wrap { position:relative; width:33.33%; margin:-72px 0; top:50%; float:left }
label { margin:1.5em auto }
input { position:absolute; left:-9999px }

// **** ==== Slider v1: ==== **** //

// ********** Background:
.slider-v1 {
  position: relative; display: block;
  width: 5.5em; height: 3em;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(#000,0.07),rgba(#fff,0)),#ddd;
  box-shadow:
    0 0.07em 0.1em -0.1em rgba(#000,.4) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7);
}

// ********** Switch:
.slider-v1::before {
  position: absolute; content:'';
  width: 2em; height: 2em;
  top: 0.5em; left: 0.5em;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient(#f5f5f5 10%,#eee);
  box-shadow:
    0 0.1em 0.15em -0.05em rgba(#fff,.9
    ) inset,
    0 0.5em 0.3em -0.1em rgba(#000,.25);
}

// ********** Markers:
.slider-v1::after {
  position: absolute; content:'';
  width: 1em; height: 1em;
  top: 1em; left: 6em;
  border-radius: 50%;
  transition: 250ms ease-in;
  background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#ddd;
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7),
    -7.25em 0 0 -0.25em rgba(#000,.3);
}

input:checked + .slider-v1::after {
  background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#4c6;
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7),
    -7.25em 0 0 -0.25em rgba(#000,.12);
}

input:checked + .slider-v1::before {
	left: 3em;
}

// **** ==== Slider v2 ==== **** //

// ********** Background:
.slider-v2 {
  position: relative; display: block;
  width: 5.5em; height: 3em;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: linear-gradient(rgba(#000,0.07),rgba(#fff,0)),#ddd;
  box-shadow:
    0 0.07em 0.1em -0.1em rgba(#000,.4) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7);
}

// ********** Switch:
.slider-v2::after {
  position: absolute; content:'';
  width: 2em; height: 2em;
  top: 0.5em; left: 0.5em;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient(#f5f5f5 10%,#eee);
  box-shadow:
    0 0.1em 0.15em -0.05em rgba(#fff,.9
    ) inset,
    0 0.2em 0.2em -0.12em rgba(#000,.5);
}

// ********** Channel:
.slider-v2::before {
  position: absolute; content:'';
  width: 4em; height: 1.5em;
  top: 0.75em; left: 0.75em;
  border-radius: 0.75em;
  transition: 250ms ease-in-out;
  background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#d0d0d0;
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7),
    0 0 0 0 rgba(#4c6,.7) inset;
}

input:checked + .slider-v2::before {
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba(#fff,.7),
    3em 0 0 0 rgba(#4c6,.7) inset;
}

input:checked + .slider-v2::after {
	left: 3em;
}

// **** ==== Slider v3 ==== **** //

// ********** Background:
.slider-v3 {
  position: relative; display: block;
  width: 7em; height: 3em;
  cursor: pointer;
  border-radius: 1.5em;
  transition: 350ms;
  background: #ddd;
}

// ********** Switch:
.slider-v3::after {
  position: absolute; content:'';
  width: 2em; height: 2em;
  top: 0.5em; left: 0.5em;
  border-radius: 1.5em;
  transition:
    width 200ms ease-out,
    height 300ms 50ms ease-in,
    top 300ms 50ms ease-in,
    left 250ms 50ms ease-in,
    box-shadow 300ms ease-in;
  background: #4c6;
  box-shadow: 0 0 0 1.5em #f2f2f2 inset;
}

input:checked + .slider-v3::after {
  width: 4em; height: 3em;
	top: 0; left: 3em;
  box-shadow: 0 0 0 0 #f2f2f2 inset;
}

Switches.markdown

Switches

The first 2 are designed with depth and lighting, while the 3rd one is flatly designed with a somewhat "gooey"-ish transition on it.

A Pen by jupegarnica on CodePen.

License.