CSS ile switcher yapımını bu yazıda işleyeceğiz. Yazıda verdiğim kodlar ile basit bir şekilde, modern bir switcher yapabilirsiniz.

Öncelikle HTML’de iki tane eleman kullanmamız gerekiyor. Bunlar label ve input etiketleri. Switcher’ın açık veya kapalı olmasını checkbox’un checked olup olmamasına göre kontrol edeceğiz. Eğer işaretli ise switcher’ımız aktif olarak görünecek.

Checkbox’un ID’si ile label’in for değeri birbirine eşit olacak. Böylece labele bastığımızda aynı zamanda checkboxa da basmış olacağız.

Şimdi bu CSS kodlarımızı temamıza ekleyelim.

input.switch {
    display: none;
}
label.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgb(222, 222, 222);
    border-radius: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

label.switch:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: rgb(255, 255, 255);
    top: 1px;
    left: 1px;
    transition: all 300ms;
}

input.switch:checked + label.switch:after {
    transform: translateX(20px);
}

input.switch:checked + label.switch {
    background-color: rgb(67, 224, 80);
}

Daha sonra aşağıdaki kod parçacığını eklediğiniz yerde switcher’ı görüntüleyebilirsiniz.

<input type="checkbox" class="switch" id="toggle" />
<label for="toggle" class="switch"></label>