CSS ile Switcher Yapımı

Son güncelleme:
CSS ile Switcher Yapımı

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.

logo

Uygun fiyatlı ve kaliteli hosting satın al.

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>

Bültene Abone Ol

Gelen kutunuza teslim edilen en son haberlerimizi, öğreticilerimizi, kılavuzlarımızı, ipuçlarımızı ve fırsatlarımızı alın.

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Henüz bir yorum yok. Başlatmak ister misin?

Yorum yaparken yazım kurallarına ve genel ahlak kurallarına dikkat edelim.