CSS3 change complètement le jeu de la création de boutons sur le Web. Des techniques qui n'étaient auparavant possibles qu'avec des images sont maintenant facilement exécutables avec seulement quelques lignes de code. Pour cet article, nous avons personnalisé six boutons CSS au style attrayant que vous pouvez copier et coller directement dans vos projets, aucune attribution n’est requise.
Comme pour tout ce qui est bon en CSS3, les boutons ci-dessous fonctionnent très bien dans les navigateurs Webkit et Mozilla, mais diverses versions d'IE ne fonctionneront pas correctement.
Une note rapide sur la sémantique
Les exemples ci-dessous sont un peu lourds sur le balisage HTML et beaucoup d'entre eux pourraient facilement être plus maigres. Je les ai structurés de la sorte afin que je puisse garder le CSS bien séparé pour différentes parties du bouton. Cela vous permet de mélanger et d’assortir différentes parties de chacun des exemples ci-dessous. Si vous implémentez l'un de ceux-ci, veillez à examiner de près le CSS et le HTML pour voir si vous pouvez en réduire le gras.
Bouton arrondi: deux lignes
Parfois, une seule ligne de texte ne le coupe pas. Utilisez ce bouton lorsque vous avez beaucoup à dire et que vous souhaitez l’entasser dans un espace restreint. Pour le style, j'ai utilisé un dégradé de # 99CF00 à # 6DB700 et quelques traitements simples de bordures.
HTML
CSS
Pilule rouge
Ce bouton rouge simple mais attrayant utilise des coins très arrondis pour lui donner une forme semblable à celle d’une pilule. Vous trouverez un dégradé de fond de # d46d45 à # b1432a et de légers effets de bordure en haut et en bas. Encore une fois, l'effet de survol est simplement un effet inverse.
HTML
CSS
Typographie sombre
Ici, j'ai utilisé une technique de typographie pour obtenir un aspect incrusté sur le texte. Fondamentalement, tout ce que vous faites est de rendre le texte plus sombre que l’arrière-plan, puis de lui donner une ombre claire. Pour l'effet de survol, j'ai juste éclairci un peu les couleurs.
HTML
CSS
Beauté noire
Pour ce bouton, je voulais vraiment créer quelque chose de chic et de chic. Pour ce faire, j'ai mis en œuvre trois astuces. Tout d'abord, j'ai appliqué des dégradés arrêtés pour lui donner cet aspect brillant. Ensuite, j'ai appliqué une ombre intérieure, ce qui est très pratique pour ajouter de la profondeur et des effets d'éclairage. Enfin, j'ai appliqué une légère lueur à travers l'utilisation d'une ombre de texte.En vol stationnaire, je réduit la lueur et intensifie l'ombre.
HTML
CSS
Blue Pill avec icône
Le bouton de pilule bleu associe le style brillant du bouton précédent à la forme de la pilule rouge vue du haut. Encore une fois, j'ai utilisé des dégradés brillants et dans l'ombre intérieure, mais pour rendre les choses intéressantes, j'ai ajouté une icône: un petit crayon. L'avantage de cette icône est qu'elle ne nécessite aucune police spéciale, mais uniquement du code HTML! C'est un petit ajout intéressant qui peut vraiment égayer un bouton de contact sans aucun effort.
HTML
CSS
J'aime / n'aime pas les boutons
Ici, j'ai créé deux boutons circulaires destinés à la mise en œuvre d'un système d'évaluation simple. Le bouton vert signifie un vote positif et le rouge un vote négatif. Comme avec le dernier bouton, les icônes ici sont purement HTML et ne nécessitent aucune astuce @ font-face.
HTML
CSS
Conclusion
J'espère que ces boutons vous seront utiles. Même si les limitations du navigateur rendent certaines d'entre elles pas assez prêtes pour la mise en œuvre, elles fournissent néanmoins d'excellents exemples d'apprentissage pour certaines des nouvelles fonctionnalités impressionnantes de CSS3.
Laissez un commentaire et dites-nous ce que vous pensez!