Geçiş Anahtarı 26

.switch26 {
--switch-width: 3.5em;
--switch-height: calc(var(--switch-width) / 2);
--left-ball-color: black;
--right-ball-color: white;
width: var(--switch-width);
height: var(--switch-height);
border-radius: calc(var(--switch-height) / 2);
background-color: var(--left-ball-color);
position: relative;
overflow: hidden;
}

.switch26 input[type="checkbox"] {
width: 100%;
position: absolute;
height: 100%;
margin: 0;
opacity: 0;
}

.switch26 .left26 {
position: absolute;
width: calc(var(--switch-width) / 3);
height: calc(var(--switch-height) / 1.5);
background-color: var(--left-ball-color);
border-radius: 50%;
left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
z-index: 2;
pointer-events: none;
}

.switch26 .right26 {
position: absolute;
width: calc(var(--switch-width) / 3);
height: calc(var(--switch-height) / 1.5);
background-color: var(--right-ball-color);
border-radius: 50%;
right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
z-index: 2;
pointer-events: none;
}

.switch26 .switcher26 {
position: absolute;
width: calc(100% + var(--switch-width) / 3);
height: 100%;
background-color: var(--right-ball-color);
z-index: 1;
left: calc(-50% + var(--switch-width) / (3 * 2));
pointer-events: none;
transition: left 500ms ease;
border-top-left-radius: calc(var(--switch-width) / 3);
border-bottom-left-radius: calc(var(--switch-width) / 3);
}

.switch26 .switcher26:before {
position: absolute;
content: '';
width: calc(var(--switch-width) / 3);
height: 100%;
background-color: var(--left-ball-color);
display: block;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
z-index: 2;
}

.switch26 .switcher26:after {
position: absolute;
content: '';
width: calc(var(--switch-width) / 3);
height: 100%;
background-color: var(--right-ball-color);
display: block;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
}

.switch26 input:checked ~ .switcher26 {
left: 100%;
}

.switch26 input:checked ~ .switcher26:before {
display: none;
}