Cara Membuat Toggle Switch Menggunakan CSS dan HTML

Faronesia.com - Halo sahabat faronesia, pada kesempatan kali ini kita akan membuat sebuah Toggle switch menggunakan CSS dan HTML. Seperti pada artikel faronesia yang lalu yaitu Cara membuat fitur dark mode pada blog juga menggunakan toggle switch yang sama.

Oke, kembali ke pembahasan, jika anda belum tau cara membuat Toggle Switch maka sangat bagus dan tepat sekali untuk mempelajarinya di web ini.

Sudah banyak sekali beberapa web maupun blog menggunakan Toggle Switch dengan fungsi bermacam-macam sesuai kebutuhan mereka bahkan dengan bentuk yang berbeda pula. Namun kali ini kita akan membuat Toggle Switch dasar hanya menggunakan CSS dan HTML.

Cara Mudah Membuat Toggle Switch Menggunakan CSS dan HTML

  • Silahkan buka notepad anda lalu ikuti instruksi dibawah ini
  • Buatlah sebuah batang/struktur dasar web seperti pada umumnya, lihat dibawah ini:
<!DOCTYPE html>
<html>
<head>
     <title>Toggle Switch</title>
     Letakkan kode CSS disini
</head>
<body>
     Letakkan kode HTML disini
</body>
</html>
  • Hapus tulisan yang berwarna merah lalu ganti dengan kode CSS dibawah ini
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
body{
 margin: 30%;
}
label{
 width: 80px;
 height: 30px;
 position: relative;
 display: inline-block;
}
span{
 position: absolute;
 width: 80px;
 height: 30px;
 background-color: grey;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 border-radius: 20px;
}
span::before{
 content: "";
 position: absolute;
 width: 20px;
 height: 20px;
 background-color: white;
 border-radius: 50%;
 top: 5px;
 left: 5px;
 transition: .4s;
}
input{
 visibility: hidden;
}
input:checked + span::before{
 transform: translateX(50px);
}
input:checked + span{
 background: linear-gradient(to right, royalblue, skyblue);
}
</style>
  • Lalu, hapus tulisan yang berwarna kuning lalu ganti dengan kode HTML dibawah ini
 <label>
  <input type="checkbox">
  <span></span>
 </label>
  • Sampai disini sudah hampir selesai
  • Selanjutnya, simpan file tersebut kedalam perangkat anda dengan format .html
  • Lalu jalankan file tersebut menggunakan browser untuk melihat hasilnya
Anda bisa memodifikasi lagi CSS dan HTML diatas sedemikian rupa agar lebih sempurna karena tutorial diatas masih sangat dasar.

Demikianlah mengenai Cara Mudah Membuat Toggle Switch Menggunakan CSS dan HTML semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel