Crea divertenti pulsanti radio animati con Radiobox.css

I pulsanti di opzione HTML5 predefiniti sono piuttosto noiosi. Ci sono modi per personalizzarli usando CSS3, ma la maggior parte delle tecniche si concentra solo sull'aspetto .

Radiobox.css si concentra su aspetto e stile aggiungendo animazioni CSS3 personalizzate agli input radio.

Questa libreria è completamente gratuita e open source, disponibile su GitHub per il download. Con questa libreria CSS, puoi scegliere tra più di 12 diverse animazioni che si applicano ai pulsanti di opzione.

Senza stili CSS personalizzati, sembreranno ancora normali ingressi radio . Ma quando l'utente fa clic per selezionare un pulsante, otterrà un pazzo effetto di animazione . Puoi vedere esempi dal vivo sulla pagina principale di Radiobox che mostra ogni stile accanto al suo nome.

È possibile installare Radiobox direttamente da npm o bower o persino scaricare i file localmente sul proprio computer. GitHub ospita tutti i loro file in un CDN se vuoi giocare senza scaricare nulla.

L'unico file di cui hai bisogno è radiobox.min.css che dovrebbe andare direttamente nel tuo documento . Da lì, basta aggiungere una semplice classe a ciascun pulsante di opzione in base all'animazione desiderata.

Ecco uno snippet di codice per l'effetto "boing":

Nota che l'animazione "boing" ha un proprio file CSS chiamato boing.min.css . Questo deve essere incluso se prevedi di usare quell'effetto sulla pagina.

Quando scarichi Radiobox dovresti ottenere una directory demo con demo live per tutti questi effetti . Puoi semplicemente copiare / incollare il codice direttamente sulla tua pagina per farlo funzionare senza problemi.

Per la documentazione completa, controlla il repository principale insieme al sito demo dal vivo . Se vuoi contattare i creatori, puoi inviare un'email dal sito Web 720kb o dal messaggio tramite Twitter @ 720kb_ .