Cara Membuat Tombol Animasi Switch/Toggle Dengan Css (Tanpa Javascript)

Tombol switch atau pengubah umumnya dibuat menggunakan bantuan Javascript, namun kali ini hanya menggunakan Css. Selain ringan, tombol ini juga mudah dibuat serta mudah digunakan, kita hanya memerlukan Html dan Css. Untuk membuat tombolnya, mari kita ikuti langkah-langkah berikut ini.

Buat sebuah file html seperti 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>

Kemudian kita akan menggunakan Scss, tambahkan Css berikut ini.

.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;
      }
    }
  }
}

Kemudian kita akan menambahkan Animasi Cssnya

$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);
}

Demo Button

Bagaimana, cukup mudah bukan cara membuatnya. Kita tidak perlu menggunakan javascript dan membuat segalanya menjadi ringan dan mudah. Trutorial ini berdasarkan panduan dari Pete Lada.