Geçiş Anahtarı 29

.switch29 {
position: relative;
width: 55px;
height: 15px;
}

.switch29 input {
opacity: 0;
width: 0;
height: 0;
}

.slider29 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider29:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 0px;
bottom: -5px;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
box-sizing: border-box;
border: 10px solid white;
border-radius: 50%;
}

input:checked + .slider29 {
background-color: #06a606;
}

input:checked + .slider29:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(30px);
background: limegreen;
box-sizing: border-box;
border: 10px solid white;
}