Cara Membuat Switch/Toggle Button tanpa JavaScript

Cara Membuat dan Pasang Tombol Switch/Toggle Button tanpa JavaScript

Lagi jalan-jalan a.k.a blogwalking di Github dan CodePen, ketemu tutorial keren yang dibagikan secara gratis oleh Peter Lada.

Ya, membuat dan memasang tombol Switch atau Toggle tanpa menggunakan JavaScript; cukup dengan mengaplikasikan HTML dan CSS di template blogger, kita bisa membuat Toggle Button di blog.

Jujur saya kurang bisa menjelaskannya; akan tetapi, fungsi Toggle Button ini bisa digunakan sebagai mematikan atau mengaktifkan suatu JavaScript dengan sekali klik.

Contohnya, mode gelap (malam) atau mode terang (pagi/siang) terhadap tampilan blog.

Cara Membuat Switch/Toggle Button tanpa JavaScript

Baca Juga: Cara Membuat Kotak HTML, JavaScript & CSS

Cara Membuat Switch/Toggle Button tanpa JavaScript


1. Silahkan buat file dari kode dibawah ini:

<label class="tgl">
  <input type="checkbox" />
     <span class="tgl_body">
        <span class="tgl_switch"></span>
          <span class="tgl_track">
        <span class="tgl_bgd"></span>
      <span class="tgl_bgd tgl_bgd-negative"></span>
    </span>
  </span>
</label>

2. Untuk CSSnya, kode yang digunakan adalah:

.tgl {
> :checked ~ .tgl_body {

> .tgl_switch {
   left: $toggle-width - $switch-size;
}

.tgl_bgd {
   right: -($toggle-width - ($switch-size / 2));

&.tgl_bgd-negative {
   right: auto;
   left: -10px;
}
}
}
}

3. Tambahkan pula animasinya dengan kode dibawah ini:

  $anim-slight-bounce: cubic-bezier(0.34,1.61,0.7,1);
  $anim-speed-normal: 250ms;

.tgl_bgd {
@include transition(left $anim-slight-bounce $anim-speed-normal, right $anim-slight-bounce $anim-speed-normal);
}

Sila masuk kesini, CodePen by Peter Lada bagi yang ingin mengedit ulang atau melihat contoh Toggle Button yang dimaksud.

Baca Juga: Cara Membuat Widget Blog hanya Tampil di Single Post

Itulah cara memasang tombol Toggle Button di blogger (blogspot) tanpa JavaScript; akan tetapi hanya menggunakan HTML dan CSS.

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama