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;
}