Créez des boutons radio animés amusants avec Radiobox.css

le boutons radio HTML5 par défaut sont assez ennuyeux. Il y a moyen de les personnaliser en utilisant CSS3, mais la plupart des techniques se concentrer uniquement sur les regards.

Radiobox.css met l'accent sur regards et style ajout d'animations CSS3 personnalisées aux entrées radio.

Cette bibliothèque est complètement gratuit et Open source, disponible sur GitHub à télécharger. Avec cette bibliothèque CSS, vous pouvez choisir parmi plus de 12 animations différentes qui s'appliquent aux boutons radio.

Sans styles CSS personnalisés, ils vont toujours ressemblent à des entrées radio normales. Mais lorsque l'utilisateur clique pour sélectionner un bouton, il obtenir un effet d'animation fou. Tu peux voir exemples vivants sur la page principale Radiobox qui montre chaque style à côté de son nom.

Vous pouvez installer Radiobox directement à partir de npm ou bower, ou même télécharger les fichiers localement sur votre ordinateur. GitHub héberge tous ses fichiers dans un CDN si vous voulez jouer sans rien télécharger.

Le seul fichier dont vous avez besoin est radiobox.min.css qui devrait aller directement dans la tête de votre document. De là, vous venez ajouter une classe simple à chaque bouton radio en fonction de l'animation que vous voulez.

Voici un extrait de code pour le “boing” effet:

Noter la “boing” l'animation a son propre fichier CSS appelé boing.min.css. Ce doit être inclus si vous envisagez d'utiliser cet effet sur la page.

Lorsque vous téléchargez Radiobox, vous devriez obtenir un répertoire de démonstration avec démos en direct pour tous ces effets. Vous pouvez simplement copier / coller le code directement sur votre page pour le faire fonctionner sans tracas.

Pour documentation complète, Vérifiez dépôt principal avec le site de démonstration en direct. Si vous souhaitez contacter les créateurs, vous pouvez envoyer un courrier électronique à Site web 720kb ou message via Twitter @ 720kb_.