html, body {
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
background: url("https://i.pinimg.com/564x/12/6f/e9/126fe9e1d8f13ab4f126d2b9a4ed83fe.jpg");
background-size: cover;
}
.toggle-wrap{
position: relative;
display: inline-block;
width: 13rem;
height: 4rem;
top: 2rem;
}
input{
visibility: hidden;
}
.toggle-switch{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url("https://i.pinimg.com/564x/99/2c/b1/992cb12eece5299f4ee89fd77924fe87.jpg");
background-size: cover;
transition: .4s;
border-radius: 30px;
}
.toggle-switch:before{
position: absolute;
content: "";
height: 4rem;
width: 4rem;
border-radius: 50%;
left: 4px;
background:url("https://i.pinimg.com/564x/6d/1e/2f/6d1e2ff4321a3656a26c2cdcee79fa8f.jpg");
background-size: cover;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .toggle-switch{
background: url("https://i.pinimg.com/564x/a0/70/f8/a070f899c32a30052e2fd71a0e591952.jpg");
}
input:focus + .toggle-switch{
box-shadow: 0 0 1px #2196F3;
}
input:checked + .toggle-switch:before{
transform: translateX(8.5rem);
background: url("https://i.pinimg.com/564x/54/22/21/5422217e9822988050ee8ba118b2f3b6.jpg");
background-size: cover;
}