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.

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

CSS berikut untuk tampilan checkbox yang flat switch.

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

CSS berikut untuk tampilan checkbox yang flip switch.

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

Maka CSS keseluruhannya seperti gambar di bawah ini.

Membuat Efek Animasi Pada Inputan Chekbox Dengan CSS 3

Berikut adalah hasilnya.

Download

14 Agustus 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat