Cara Membuat Toggle Switch dengan CSS

Ketika kita memilih hidup dengan topeng, dan orang2 menyukainya. Maka sesungguhnya itu masalah kita.
Tapi ketika kita tampil adanya, dan orang2 ternyata tidak suka, bahkan membenci. Maka sesungguhnya itu masalah mereka.
Pahamilah perbedaan kedua hal ini. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Toggle Switch dengan CSS.

Toggle switch ini adalah tombol yang dimaksud dengan on/off. Nah di tutorial ini juga menggabungkan animasi juga di tutorial ini. Oke langsung saja, berikut Cara Membuat Toggle Switch dengan CSS.

Seperti biasa, terlebih dahulu siapkan file index.html nya.

Kemudian, isi untuk 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>

Selanjutnya, isi untuk 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? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Toggle Switch dengan CSS.

Semoga bermanfaat, terima kasih

Kategori