Switch yaparken HTML’de iki tane element kullanmamız gerekiyor. Bunlardan biri label diğeri input.
İkisine de aynı class’ı veriyorum. CSS’de ayarlarken input.switch veya label.switch olarak ayarlayacağım.
<input type="checkbox" class="switch" id="toggle" />
<label for="toggle" class="switch"></label>
Burada switch’in açık veya kapalı olma değerini checkbox’ın checked olup olmadığına göre ayarlamak istiyorum. Checkbox’a bir ID atadım ve label’ın da for attribute’üne (öz niteliğine) checkbox’a verdiğim ID’yi yazdım. Bu durumda label’a bastığım zaman aslında checkbox’a basmış gibi olacağım.
Şimdi CSS kodlarımızı yazabiliriz:
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);
}
Yukarıdaki gibi yazdığınız zaman bu switch’i istediğiniz yerde kullanabilirsiniz. Checkbox’ın ID’si ile label’ın for’unun aynı olmasına dikkat edin.