Cara membuat Toggle Switch dengan CSS tanpa Javascript

Cara mudah dalam membuat toggle switch css
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.

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
© Kenscripts. All rights reserved. Developed by Jago Desain