Membuat Efek Animasi Pada Checkbox Dengan CSS 3

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat efek animasi pada inputan Checkbox dengan menggunakan CSS 3. Seperti yang kita ketahui mengcustomize tampilan default checkbox tidak lah mudah, kadang kita suka merasa bosan dengan tampilan checkbox bawaan dari HTML yang hanya bisa di centang. Nah di sini saya kan membuat tampilan checkbox yang sedikit berbeda dari tampilan aslinya, kita akan coba menggunakan tehnik flat switch dan flip switch, Efek- efek tersebut akan kita buat hanya menggunakan CSS3. Oke kita akan langsung membuatnya saja ya teman-teman.

Pertama kalian bisa buat tampilan HTML nya seperti gambar di bawah ini.

CSS berikut untuk tampilan checkbox yang flat switch.

CSS berikut untuk tampilan checkbox yang flip switch.

Maka CSS keseluruhannya seperti gambar di bawah ini.

Berikut adalah hasilnya.

Download