CSS
body{
background-color: #edf0f4;
font-family: "Helvetica", sans-serif;
color: #fff;
}
.toggleContent{
position: absolute;
top: 50%;
left: 50%;
overflow: hidden:
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.toggleContent input{
position: absolute;
left: -99em;
}
.toggle{
cursor: pointer;
display: inline-block;
position: relative;
width: 120px;
height: 50px;
background: #d21626;
border-radius: 5px;
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before, .toggle:after{
position: absolute;
line-height: 50px;
font-size: 14px;
z-index: 2;
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before{
content: "OFF";
left: 20px;
color: #D21626;
}
.toggle:after{
content: "ON";
right: 20px;
color: #fff;
}
.toggleHandler{
display: inline-block;
position: relative;
z-index: 1;
background: #fff;
width: 65px;
height: 44px;
border-radius: 3px;
top: 3px;
left: 3px;
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
input:checked + .toggle{
background: #38b7ff;
}
input:checked + .toggle:before{
color: #fff;
}
input:checked + .toggle:after{
color: #38b7ff;
}
input:checked + .toggle .toggleHandler{
width: 54px;
-webkit-transform: translateX(60px);
transform: translateX(60px);
border-color: #fff;
}
