Utilisez des boutons CSS3 en forme de bonbon
Voici une feuille de style CSS qui va vous permettre de créer des boutons CSS3 avec un style étonnant : des boutons qui ont l’aspect de bonbon ! Original et facile à mettre en place, c’est une bonne occasion d’utiliser ces petites friandises pour enrichir une page web.
BonBon Sweet CSS3 Buttons
L’objectif de l’auteur était le suivant : créer des boutons CSS qui soient jolis, souples, faciles à utiliser et construits avec un balisage sémantique correct et le plus minimaliste possible. Et voilà comment sont nés les boutons « BonBon » qui feront la joie des amateurs de CSS3 ! Avec quelques classes CSS à appliquer, vous obtiendrez facilement un résultat superbe.
Structure de base
Le balisage sémantique d’un bouton de base est simple. On applique la classe CSS « button » à notre lien :
<a href="" class="button">Label</a>
Vous pouvez ensuite changer son apparence en ajoutant plusieurs classes CSS :
<a href="" class="button orange glossy">Label</a>
Insertion d’icônes
Il est possible d’ajouter des îcones dans le bouton. Pour cela, il faut utiliser l’attribut personnalisé HTML5 « data-* » qui permet de stocker une donnée associée à la balise HTML courante. Par exemple, on va utiliser « data-icon » pour déclarer l’icône (symboles Unicode, Pictos ou Writesocial). Puis on affiche l’icône avec la syntaxe « .button:before { content: attr(data-icon); } ». Ainsi, le code est parfaitement valide W3C en utilisant le doctype HTML5 et il vous permet de rapidement modifier les icônes sans avoir à retoucher le CSS.
<a href="" class="button orange glossy" data-icon="S">Label</a>
Accessibilité
Pour rendre votre bouton plus accessible, vous pouvez ajouter l’attribut « role » qui permet de définir la fonction que remplit l’élément HTML, et l’attribut « tabindex » qui permet de modifier l’ordre naturel de la navigation par tabulation. Il est également possible d’utiliser l’attribut « disabled » pour désactiver l’élément HTML.
<a href="" role="button" tabindex="1" class="button pink">Tab1</a> <a href="" role="button" tabindex="2" class="button pink">Tab2</a> <button disabled class="button pink glossy">Disabled</button>
Style
Il faut savoir que les boutons ne sont pas entièrement en CSS. En effet, il y a la présence d’une image PNG pour générer la texture « noise ». A part ça, tout le reste est une combinaison de propriétés CSS3 : « text-shadow », « box-shadow », « gradient », et « border-radius ». On peut donc facilement changer le style du bouton. Par exemple, on peut s’amuser à modifier sa forme au survol de la souris.
Flexibilité
La feuille de style possède plusieurs classes CSS prédéfinies que vous avez juste à appliquer sur votre bouton pour voir les changements s’effectuer :
- Couleur : orange, pink, blue, green, transparent
- Police : serif (ou toute autre police)
- Texture : glossy, glass
- Taille : xs, xl
- Forme : round, oval, brackets, skew, back, knife, shield, drop, morph
- Icône uniquement : icon
- Désactivé : disabled
Voici trois exemples ; un bouton avec uniquement l’icône, un autre avec la forme « skew » et un dernier de couleur transparente :
Pour conclure…
On peut donc souligner la qualité du travail de @simurai qui nous propose ces superbes boutons CSS3. Cependant, le point faible de l’outil reste la compatibilité cross-browser. On n’en sait pas beaucoup sur le site officiel mais il semblerait que les boutons soient parfaits sur Firefox 3.6+ et Chrome 5.0+. En revanche, ils sont bien moins réussis sur Opera 11.50+ et Internet Explorer 9 qui affichent tous deux le même résultat : les boutons n’ont pas exactement la même forme, les icônes sont parfois décalées, et le dégradé CSS est absent. Quant aux versions antérieures à IE9, oubliez ces petits bonbons… tout simplement !
Requis : navigateur compatible CSS3
Démonstration : http://lab.simurai.com/buttons/
Licence : libre