Untuk kali ini kita akan membuat sebuah sebuah animasi sederhana, yatu disini kita akan belajar cara membuat toogle switch dengan CSS, dimana biasanya tombol switch ini berfungsi seperti saklar lampu ya, on dan off, disini kita akan buat seperti itu menggunakan HTML dan CSS saja, seperti apa caranya simak terus ya teman-teman.

Sebenarnya cara membuat toogle switch itu kita bisa menggunakan cara dari bootstrap ya, jadi yang akan kita kerjakana disni versi kita membuatnya sendiri manual, jadi saya harap teman-teman tidak hanya sekedar tau switch dari bootstrap, dan teman-teman tidak heran lagi bagaimana cara membuatnya, sekarang teman-teman bisa tau di balik pembuatan switch yang ada di bootstrap, oiya cara membuat switch ini kita juga membutuhkan sebuah jQuery ya jadi tidak hanya CSS, jadi dimana jQuery sendiri berfungsi sebuah event dimana toggle switch itu di klik maka suatu class baru akan muncul yang menyebabkan ON dan OFF itu berfungsi.

Pembuatan toogle switch ini saya sering menggunakan CSS before after ya, apakah teman-teman masih ingat, untuk mengingat kembali disini saya akan langsung saja teman-teman lihat kodingan terlebih dahulu:

Oke jadi before afte di pakai untuk sebuah awalan dan akhiran, jadi dimana ibarat di dalam perlombaan lari pasti ada start dan finish ya, sama di sini saya terapkan before itu buat latar belakng yang putih itu dan afternya adalah bulat untuk animasi togglenya, dan di dalam class baru sama ketika switch itu di klik maka warna background akan berubah dan lingkaran tersebut akan bergeser dari kiri ke kanan, oke langsung saja untuk melihat hasilnya

Cara membuat toogle Switch dengan CSS Cara membuat toogle Switch dengan CSS

Bisa dilihat ya cantik bukan yang kiri adalah sebelum di klik dan yang kanan ketika di klik, jadi disini kita bisa membuat toggle switch secara manual tanpa bantuan bootstrap, keren bukan, oke saya rasa cukup ya belajar kita untuk kali ini yaitu Cara membuat toogle Switch dengan CSS dan semoga bermanfaat.

WhatsApp chat