/********************Switch*******************/
.box-1 {
  width:60px;
  height:20px;
  background: rgb(200,200,200) ;
  position:relative;
  margin-bottom:20px;
}

.box-1 input {
  position:absolute;
  left: 0px;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:00;
  z-index:999;
}

.box-1 .toogle {
  display:block;
  position:absolute;
  z-index:998;
  width:30px;
  height:100%;
  background: grey;
  top:0;
  box-shadow:0px 0px 3px rgb(50,50,50) inset;
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
  text-align:center;
}
.box-1 .toogle:before {
  content:"OFF";
  color: #fff;
  text-shadow: 1px 1px #000;
  font-family:tahoma;
  font-size: 11px;
}

.box-1 input:checked ~ .toogle {
  margin-left:30px;
}
.box-1 input:checked + .toogle:before {
  content:"ON";
}
/********************Button 2*******************/
.box-2 {
  display: table;
  width:60px;
  height:12px;
  background: rgb(200,200,200) ;
  position:relative;
  border-radius:10px;
  margin-top: 10px;

}

.box-2 input{
  position:absolute;
  left: 0px;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0;
  z-index:999;
}

.box-2 .toogle{
  position:absolute;
  z-index:998;
  width:25px;
  height:25px;
  background: #337ab7;
  top:-6px;
  box-shadow:0px 0px 3px rgb(50,50,50) inset;
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
  text-align:center;
  border-radius:100%;
  display:table-cell;

}

.box-2 .toogle:before{
  content:"OFF";
  color: #fff;
  text-shadow: 1px 1px #000;
  font-family:tahoma;
  font-size: 11px;
  
  vertical-align:middle;
  
  position: absolute; 
  left: 2px;
  top: 50%;

  transform: translateY(-50%);
}

.box-2 input:checked ~ .toogle{
  margin-left:35px;
}

.box-2 input:checked + .toogle:before{
  content:"ON";
}