×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

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.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup