Cara membuat Toggle Switch dengan CSS tanpa Javascript

Cara mudah dalam membuat toggle switch css
2 min read
Cara membuat Toggle Switch dengan CSS tanpa Javascript | Kenscripts

Tombol toggle switch merupakan sebuah tombol yang berfungsi untuk on/off pada sebuah website, blog.

Lihat Juga: CSS Trick Membuat Tombol Switch 3D Only CSS3

Biasanya tombol switch toggle ini digunakan untuk suatu perintah seperti toggle dark mode dalam sebuah website.

Tampilan dari toggle switch ini bisa kita hias dengan CSS dengan mudah dan tampilan visualnya sederhana tetapi tidak memalukan.

Berikut cara membuat toggle switch tanpa javascript


1. Siapkan Notepad dan Browser
2. Copy kode HTML dan CSS dibawah dan pastekan di notepad kalian


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Toggle Switch | Kenscripts</title>

  <style>
   .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%;
   }
  </style>
 </head>
 <body>
  <h2>Toggle Switch | Kenscripts</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>
 </body>
 </html>
 


3. Done Save as .html

Begitulah cara mudah dalam membuat toggle dengan CSS.
Terima kasih telah berkunjung.
Kenny is my name, someone who is quite calm with a charming smile. Don't bother me if you don't want to see the devil. Don't act like you're innocent.

Anda mungkin menyukai postingan ini

  • Ingin bisa coding suatu program sendiri? tetapi sulit dalam menemukan website terbaik untuk belajar codingnya? Cobalah 4 tempat belajar coding secara online dan gratis. Coding…
  • Cara membat tombol back to top di blogger sangatlah mudah jika anda mengikuti tutorial ni sampai selesai dan teliti. Tombol back to top ini merupakan fitur yang penting untuk b…
  • Hallo kali ini kenny akan memberikan trik redirect atau lanjutkan halaman error 404 ke halaman utama blog. Cara yang kenny gunakan adalah dengan bantuan Javascript. Halaman 404…
  • Dengan semakin berkembangnya teknologi di dunia, maka semakin pesat pula informasi yang di dapatkan. Website interaktif misalnya, sekarang sangat berbeda dengan zaman dahul…
  • Hallo sebelumnya kenny telah membagikan Source kode download box meownime. Seteah memipki source kodenya kap ini kenny akan memberitahukan cara menerapkan kode download box di blo…
  • Hallo kali ini kenny akan membagikan source kode untuk membuat download box baik untuk anime, movie, film, tv series dan sebagainya. Source kode download box untuk blogger dan wo…

Posting Komentar

1. Dilarang komentar spam
2. Dilarang berkomentar dengan link aktif
3. Dilarang menghina agama, antar manusia, suku, bangsa, dan budaya
4. Dilarang komentar diluar pembahasan blog
5. Berkomentarlah dengan bijak