Geçiş Anahtarı 11

.switch11 input {
display: none;
}

.switch11 {
width: 60px;
height: 30px;
position: relative;
}

.slider11 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 30px;
box-shadow: 0 0 0 2px #777, 0 0 4px #777;
cursor: pointer;
border: 4px solid transparent;
overflow: hidden;
transition: 0.2s;
}

.slider11:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #777;
border-radius: 30px;
transform: translateX(-30px);
/*translateX(-(w-h))*/
transition: 0.2s;
}

input:checked + .slider11:before {
transform: translateX(30px);
/*translateX(w-h)*/
background-color: limeGreen;
}

input:checked + .slider11 {
box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

.switch11200 .slider11:before {
width: 200%;
transform: translateX(-82px);
/*translateX(-(w-h))*/
}

.switch11200 input:checked + .slider11:before {
background-color: red;
}

.switch11200 input:checked + .slider11 {
box-shadow: 0 0 0 2px red, 0 0 8px red;
}