Code

Switch Gaya Windows 10 dengan CSS dan Javascript

Pure-CSS-Windows-10-toggle-switches-331x244

halo wikiter, admin kali ini akan berbagi cara bagaimana membuat Switch sejenis tombol yang menampilkan On dan Off, biasanya kalian bisa jumpai pada smartphone dan Windows 10.

Pada tutorial ini kita akan membuat Switch dengan gaya Windows 10, disini kita menggunakan HTML input checkbox dimana jika nanti di ON checkbox tersebut akan bersifat checked sedangkan OFF  berarti tidak di checked 🙂 .

Untuk pertama kamu harus membuat file HTML, buat saja index.html dengan code dasar seperti berikut :

Tambahkan Code untuk membuat Switch menggunakan Checkbox seperti dibawah ini :

Kode diatas ditambahkan ke index.html dimana tepat dibawah body.

Tambahkan jQuery index.html karena kita akan menggunakan library jQuery untuk membuat fungsi lebih mudah.

Setelah itu kita akan membuat style Windows 10 Switch dengan CSS, buatlah file CSS dengan nama file style.css dengan syntax didalamnya seperti dibawah ini :

Sekarang kamu sudah dapat melihat tampilan Switch Windows 10 namun masih belum berfungsi karena kamu perlu javascript untuk mengaktifkan event nya yaitu jika di klik akan berubah dari on ke off dan sebaliknya.

Switch Gaya Windows 10 dengan CSS dan Javascript

Sekarang kamu tambahkan code javascript dibawah ini tepat dibawah jquery pada file index.html 

jadi code kita sudah jadi, file index.html akan seperti ini :

Nah kita sudah selesai, dan coba lihat hasilnya, keren bukan?

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Lagi Trend

To Top