Cara Menciptakan 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, menciptakan dan memasang tombol Switch atau Toggle tanpa memakai JavaScript; cukup dengan mengaplikasikan HTML dan CSS di template blogger, kita dapat menciptakan Toggle Button di blog.

Jujur aku kurang dapat menjelaskannya; akan tetapi, fungsi Toggle Button ini dapat dipakai sebagai mematikan atau mengaktifkan suatu JavaScript dengan sekali klik.

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

Baca Juga: Cara Membuat Kotak HTML, JavaScript & CSS

Cara Membuat Switch/Toggle Button tanpa JavaScript

1. Silahkan buat file dari isyarat 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, isyarat yang dipakai 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 isyarat 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 teladan 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 memakai HTML dan CSS.

Berbagi :