Cara Membuat Toggle Switch dengan CSS
Ketika kita memilih hidup dengan topeng, dan orang2 menyukainya. Karenanya sesungguhnya itu masalah kita.
Namun ketika kita tampil adanya, dan orang2 ternyata tak suka, bahkan membenci. Karenanya sesungguhnya itu masalah mereka.
Pahamilah perbedaan kedua hal ini. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Toggle Switch dengan CSS.
Toggle switch ini ialah tombol yang dimaksud dengan on/off. Nah di panduan ini pun menggabungkan animasi pun di panduan ini. Oke seketika saja, berikut Cara Merancang Toggle Switch dengan CSS.
Seperti lazim, terlebih dahulu siapkan file index.html nya.
Kemudian, isi bagi bagian <body> tag-tag HTML berikut.
<h2>Toggle Switch</h2>
<label class=switch>
<input type=checkbox>
<div class=slider></div>
</label>
<label class=switch>
<input type=checkbox checked>
<div class=slider></div>
</label><br><br>
<label class=switch>
<input type=checkbox>
<div class=slider round></div>
</label>
<label class=switch>
<input type=checkbox checked>
<div class=slider round></div>
</label>
Berikutnya, isi bagi CSS nya.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: ;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}Bagaimana teman-teman? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Merancang Toggle Switch dengan CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
