<div class="toggle">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
*, :after, :before {
box-sizing: border-box;
}
body {
margin: 60px auto;
text-align: center;
background-color: #ff9295;
transition: background-color 0.2s cubic-bezier(0, -1.85, .27, 1.75);
}
.toggle {
position: absolute;
top: 50%;
left: 50%;
// padding: 0 200px;
transform: translate3d(-50%, -50%, 0);
&:before {
content: 'OFF';
position: absolute;
left: -56px;
top: 30px;
font-size: 18px;
color: #fff;
}
&:after {
content: 'ON';
position: absolute;
right: -46px;
top: 30px;
font-size: 18px;
color: rgba(253, 15, 21, 0.31);
}
label {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
background-color: #FD1015;
border-radius: 50px;
cursor: pointer;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px #ef4247;
-webkit-tap-highlight-color: transparent;
&:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition:width 0.2s cubic-bezier(0, -1.85, .27, 1.75);
height: 42px;
width: 42px;
background-color: #fd0f14;
border-radius: 46px;
box-shadow: inset 0px 0px 0px 8px #fff;
}
}
input {
display: none;
&:checked + label {
background-color: #57de72;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px rgba(3, 132, 28, 0.5411764705882353);
&:before {
width: 10px;
background-color: #fff;
}
}
}
}
.on{
background-color: #6fc57c;
.toggle {
&:before{
color: rgba(62, 160, 81, 0.89);
}
&:after{
color: #fff;
}
}
}
View Compiled
// JUST FOR BACKGROUND CHANGE
const toggle = document.querySelector('#toggle');
const updateBackground = (event) => {
document.body.classList.toggle('on');
}
toggle.addEventListener("click", () => document.body.classList.toggle('on') , false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.