Membuat Custom Switch Toggle dengan Mudah

Hallo semuanya, pada artikel kali ini saya akan berbagi tentang salah satu cara untuk membuat custom switch toggle dengan menggunakan html dan css. Tahukah kalian tentang adanya switch toggle? atau apa sebenarnya fungsi switch toggle? elemen switch toggle ini adalah elemen yang dibuat menggunakan bagian dari elemen input, yaitu checkbox. Elemen switch toggle sendiri memiliki dua fungsi yaitu true atau false (aktif atau tidak aktif) seperti layaknya juga peran elemen checkbox pada html. Pada kesempatan kali ini kita akan melakukan manipulasi dengan memberikan tampilan switch pada elemen checkbox. Sebagai tambahan, saya juga pernah membuat tutorial tentang hal serupa dengan judul bagaimana cara membuat custom checkbox.

Baiklah teman teman langsung saja kita buat struktur html seperti berikut.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html>

 

 

selanjutnya kita akan memberikan css untuk membuat tampilan seperti switch toggle.

.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%;
}

jika kalian sudah menghubungkan struktur html yang kita buat dengan css diatas maka hasilnya akan terlihat seperti berikut

Baiklah teman teman demikian artikel tentang cara men=mbuat switch toggle dengan mudah menggunakan html dan css. Semoga bermanfaat.

 

13 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat