Buat Tombol Radio Animasi yang Menyenangkan Dengan Radiobox.css

Itu tombol radio HTML5 standar sangat membosankan. Ada beberapa cara untuk itu sesuaikan mereka menggunakan CSS3, tetapi sebagian besar teknik fokus hanya pada penampilan.

Radiobox.css Fokus pada terlihat dan gaya menambahkan animasi CSS3 khusus ke input radio.

Perpustakaan ini benar-benar gratis dan open source, tersedia di GitHub untuk diunduh. Dengan pustaka CSS ini, Anda dapat memilih lebih dari 12 animasi berbeda yang berlaku untuk tombol radio.

Tanpa gaya CSS khusus, mereka akan tetap terlihat seperti input radio normal. Tetapi ketika pengguna mengklik untuk memilih tombol mereka akan dapatkan efek animasi yang gila. Anda bisa lihat contoh hidup pada halaman utama Radiobox yang melakukan demo setiap gaya di sebelah namanya.

Anda dapat menginstal Radiobox langsung dari npm atau bower, atau bahkan mengunduh file secara lokal ke mesin Anda. GitHub host semua file mereka dalam CDN jika Anda ingin bermain-main tanpa mengunduh apa pun.

Satu-satunya file yang Anda butuhkan adalah radiobox.min.css mana yang harus pergi langsung ke kepala dokumen Anda. Dari sana, Anda baru saja tambahkan kelas sederhana untuk setiap tombol radio tergantung pada animasi yang Anda inginkan.

Ini a cuplikan kode Untuk “boing” efek:

Perhatikan “boing” animasi memang punya file CSS-nya sendiri bernama boing.min.css. Ini harus dimasukkan jika Anda berencana untuk menggunakan efek itu di halaman.

Ketika Anda mengunduh Radiobox, Anda harus melakukannya dapatkan direktori demo dengan demo langsung untuk semua efek ini. Anda bisa saja salin / tempel kode langsung ke halaman Anda untuk membuatnya bekerja tanpa kerumitan.

Untuk dokumentasi lengkap, lihat repo utama Bersama dengan situs demo langsung. Jika Anda ingin menghubungi pembuatnya, Anda dapat mengirim email dari Situs 720kb atau pesan melalui Twitter @ 720kb_.