CSS ile Toggle Switch Yapımı (HTML CSS)
Bu yazıda JavaScript kullanmadan sadece CSS ile
Toggle Switch Yapımı hakkında bahsettik. Checkbox ile bunu kolay bir
şekilde yaparsınız. İnternet sitelerinde “açma kapama”, “on off” ve “koyu mod,
aydınlık mod” amaçları ile kullanılır. Aşağıda kodlar ve nasıl yapacağınız
anlatılmıştır.
CSS ile Toggle Switch Yapımı
CSS ile Toggle Switch Yapımı oldukça kolay bir
örnektir. Input Checkbox kullanılarak yapılır. Yeni başlayan yazılımcı
arkadaşların öğrenmesi gereken bir örnektir. Çünkü, internet sitelerinde pek
çok yerde karşımıza çıkar. Aşağıda HTML ve CSS kodları verilmiştir. Aynı
şekilde YouTube videosunu izleyerek uygulamalı bir şekilde öğrenebilirsiniz.
HTML Kodları
<label class="toggle"><input type="checkbox"><span class="ball"></span></label>
Label, toggle switch için birleştirici görevi görecektir. Input Checkbox ise tıkladıkça topumuzun sağa sola kayması için gereken işlevi görecektir. Span etiketiyle ise tıkladıkça sağa sola koyan topumuzu yapacağız.
CSS Kodları
label.toggle {
position: relative;
display: inline-block;
width: 80px;
height: 34px;
}
input[type="checkbox"] {
width: 0;
height: 0;
opacity: 0;
}
.ball {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 25px;
}
.ball::before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 5px;
bottom: 4px;
background-color: #fff;
transition: .3s;
border-radius: 25px;
}
input:checked + .ball {
background-color: #58d68d;
}
input:checked + .ball:before {
transform: translateX(44px);
}
YORUMLAR