<input type="checkbox" name="switch" id="switch">
<label class="switch" for="switch"><!--<span></span>--></label>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

* { box-sizing: border-box; }

body {
   background: #edece7; 
}

.switch {
  display: block;
  position: relative;
 	width: 70px;
  height: 100px;
  margin: 70px auto;
  
  border-radius: 50px;
  background: #e6e3da;
  background: linear-gradient(#e6e3da, #fff);
  border: 1px solid rgba(0,0,0,0.1);
  
  box-shadow: 
    inset 0 7px 0 #fdfdfd,
    0 2px 3px rgba(170, 160, 140,.3);
  
  cursor: pointer;
}

.switch:before {
 	content: "";
  position: absolute;
  top: -10px; bottom: -10px;
  left: -5px; right: -5px;
  z-index: -1;
  
  background: #f2f1ed;
  border-radius: inherit;
  
  box-shadow:
    0 1px 1px rgba(#aea391,0.2),
    0 3px 3px rgba(170, 160, 140, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 0 5px rgba(170, 160, 140, 0.5);
}

.switch:after {
 	content: "";
  position:absolute; 
  width: 60px;
  height: 70px;
  border-radius: 50%;
  z-index: -1;
  left: 18px;
  top: 10px;
  background: linear-gradient(160deg, rgba(170, 160, 140, 0.7), rgba(170, 160, 140, 0));
  background: -webkit-linear-gradient(290deg, rgba(170, 160, 140, 0.75), rgba(170, 160, 140, 0));

  -webkit-filter: blur(1px);
}

/*
.switch span {
 	display: block;
  width: 100%;
  height: 100%;
}

.switch span:after,
.switch span:before {
 	content: "";
  position: absolute;
  font-family: 'Source Sans Pro', sans-serif;
	color: rgba(170, 160, 140, 0.3);
  font-size: 20px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(0,0,0,0.1); 
}
.switch span:before {
 	content: "I"; 
  top: -40px;
  left: 47%;
}

.switch span:after {
 	content: "O"; 
  bottom: -40px;
  left: 43%;
}
*/

#switch {
 	clip: rect(0 0 0 0);
  position: absolute;
  visibility: hidden;
}

#switch:checked ~ .switch {
 	background: linear-gradient(#f7f6f4, #fff);
  box-shadow:
    inset 0 -5px 0 #dbd3c8,
    0 6px 5px rgba(170, 160, 140, 0.75),
    3px 16px 5px rgba(170,160,140, 0.3);
  border-bottom: none;
}

#switch:checked ~ .switch:after {
  display: none;
}