CSS Dersleri

CSS ile Geçişli Switch Checkbox Hazırlama

Web sitelerinde yer alan formlardaki checkbox etiketlerinin nasıl geçiş yapılarak aç-kapat formatına getirilebilineceğinden bahsedeceğim. Bu işlemi gerçekleştirmek için sadece CSS kodlarını kullanarak şekillendirme yapmış olacağız.

Onay kutularına geçiş animasyonu ekleyerek açık yada kapalı gibi işlemin daha belirgin bir şekilde hazırlanmasını sağlayacağız. Bu işlemi kare ve yuvarlak temalı olarak iki şekilde gerçekleştirmiş olacağız. Hangisini tercih ederseniz kullanabilir, kodlar üzerinde oynamalar yaparak sayfanıza göre düzenleyebilirsiniz.

Checkbox Hazırlığı – HTML Kodları

İlk olarak iki adet normal bir şekilde tanımlanan checkbox oluşturuyoruz. İlkini kare biçiminde, ikincisini de yuvarlak tasarımlı bir şekilde ayarlayacağız.

<label class="switchBtn">
    <input type="checkbox"><div class="slide">AÇ</div>
</label>

<label class="switchBtn">
    <input type="checkbox"><div class="slide round">AÇ</div>
</label>

HTML kodlarını hazırladıktan sonra gerekli stil düzenlemelerini yapmak için CSS kodlarını oluşturalım.

Checkbox Hazırlığı – CSS Kodları

CSS kodlarıyla birlikte, standart görünüme sahip olan checkbox butonlarını özelleştirmiş olacağız.

.switchBtn {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 34px;
}
.switchBtn input {
    display:none
}
.slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 8px;
    color: #fff;
} .slide:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 78px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s
}
input:checked + .slide {
    background-color: #8CE196;
    padding-left: 40px
}
input:focus + .slide {
    box-shadow: 0 0 1px #01aeed
}
input:checked + .slide:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    left: -20px
}
.slide.round {
    border-radius: 34px
}
.slide.round:before {
    border-radius: 50%
}

Yukarıdaki kodlarla birlikte, HTML kodlarındaki checkbox seçim alanları için özelleştirme yapmış olduk. CSS kodları üzerinde oynamalar yaparak düzenlemeler sağlayabilirsiniz.

Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kapalı