Quand on y pense, les boutons sont les moteurs de l’interaction en ligne. Nous les utilisons pour ajouter des produits à nos paniers d’achat, obtenir plus d’informations sur un service, confirmer nos décisions et envoyer des formulaires de contact.
De cette façon, cliquer sur un bouton est quelque chose comme la conclusion réussie que les concepteurs tentent d’atteindre. C’est pourquoi il est si important de choisir des boutons qui ont l’air bien et fournissent des indices visuels évidents.
Dans cet esprit, nous avons trouvé une collection de bibliothèques de boutons CSS que vous pouvez utiliser pour stimuler l’interaction dans vos propres projets Web. Prendre plaisir!
bttn.css – boutons impressionnants pour des projets impressionnants
bttn.css est une collection de boutons de style léger présentant différentes formes, tailles et couleurs. Tous les styles peuvent être invoqués avec des noms de classe simples. Avec le fichier CSS réduit à seulement 4 Ko, cette bibliothèque est également assez légère.
Boutons: une collection de boutons CSS
Le titre peut être simple, mais Buttons est une bibliothèque avec plus de 20 collections de styles parmi lesquelles choisir. Les points forts incluent le Delta légèrement vitreux, le Theta amusant et audacieux, le Mu et Phi spacieux et minimaliste en forme de clavier. Assurez-vous de vérifier les effets de clic sympas dans la démo.
Boutons: une bibliothèque de boutons CSS construite avec Sass & Compass
À ne pas confondre avec l’autre bibliothèque appelée, ahem, Buttons. Cette bibliothèque contient des boutons CSS attrayants et simples de différentes manières. Les extras supplémentaires incluent des styles de bouton d’icône qui utilisent FontAwesome.
Boutons Pushy – Boutons CSS pressables en 3D
Les boutons-poussoirs ne sont peut-être pas l’ensemble le plus élégant que vous trouverez, mais ils sont colorés et faciles à voir dans la foule. De plus, ils fournissent un rebond étrangement satisfaisant lorsqu’ils sont cliqués. En fin de compte, n’est-ce pas tout ce dont nous avons vraiment besoin à partir d’un bouton?
btns.css – un petit cadre de boutons CSS pour une utilisation personnelle et commerciale
Personnellement, j’aime les boutons qui utilisent des transitions CSS fluides. btns.css fait un excellent travail avec des transitions de couleurs subtiles sur le défilement et même des versions qui se développeront et se rétréciront.
Press.css: une bibliothèque de boutons plate, légère et évolutive influencée par les directives de conception de matériaux de Google
Press.css fournit de superbes boutons plats dans toutes les tailles, formes et couleurs dont vous avez besoin. Avec seulement trois effets inclus, la taille du code est réduite au minimum (12 Ko). Ils fonctionnent également de manière transparente avec les icônes FontAwesome.
Effets de défilement des boutons CSS3 avec FontAwesome
Une version intéressante de son bouton d’icône traditionnel, CSS3 Button Hover Effects avec FontAwesome ne révèle l’icône que pendant l’état de défilement. Le survol d’un bouton active une transition CSS fluide qui affiche une icône FontAwesome en mode clair, à côté ou à la place du texte. Fait partie d’une grande collection de boutons CSS CodePen.
Boutons sociaux pour Bootstrap: boutons de connexion sociale en CSS pur basés sur Bootstrap et Font Awesome
Les boutons sociaux de Bootstrap combinent la bonté du framework Bootstrap avec les icônes FontAwesome. Tous les principaux réseaux sociaux sont inclus, plus de 20 au total. Il existe des classes pour chaque réseau, ainsi que des classes pour différentes tailles. Les couleurs sont faites pour correspondre à chaque service respectif.
beautons – Une boîte à outils merveilleusement simple
beautons est une bibliothèque de boutons axée sur la simplicité. Choisissez parmi différentes tailles, styles et états de boutons. Les classes CSS peuvent être combinées pour mélanger et assortir différents styles.
Boutons évidents: une alternative Bootstrap entre Graduated 2.0 et Flat 3.0
Construits avec MOINS, les boutons évidents sont colorés, attrayants et faciles à personnaliser. Ils fournissent également un effet animé simple lorsque vous cliquez dessus.
Boutons Web Orman Clark 3D Chunky
Boutons Web Chunky 3D par Orman Clark n’est pas seulement une collection de boutons sexy. C’est aussi un tutoriel complet qui montre comment ils ont été fabriqués. Ainsi, vous pouvez commencer avec les bases et continuer d’ajouter vos propres touches.
Boutons radioactifs – Créez des boutons attrayants et attrayants à l’aide d’animations CSS
Ce qui sépare les boutons radioactifs, ce sont les effets de défilement intéressants qui peuvent être ajoutés. Par exemple, le défilement peut produire un subtil changement de couleur pulsé (comme si le bouton était réellement radioactif). Cela se fait en bouclant une transition CSS un nombre spécifié de fois. Le résultat est un bouton amusant qui attire l’attention.
Il s’agit de ces clics
Les boutons peuvent souvent être négligés lors de la création d’un site Web. Après tout, ils ne prennent généralement pas beaucoup d’espace sur l’écran et ne sont pas l’élément de conception le plus excitant. Pourtant, utiliser le bon peut attirer l’attention et encourager un clic. Remarquez comment plusieurs des bibliothèques ci-dessus utilisent des effets de défilement et de clic intéressants. Ces types d’effets peuvent ajouter un peu de plaisir fonctionnel aux boutons et améliorer l’expérience utilisateur globale.
La prochaine fois que vous concevez un site Web ou travaillez sur un appel à l’action (CTA), pensez aux boutons comme plus qu’un simple élément de conception. Considérez-les comme la passerelle vers les objectifs de votre site. L’utilisation de l’une des bibliothèques présentées ci-dessus peut vraiment faire une différence dans vos taux de conversion.
