Utilisez des boutons CSS3 en forme de bonbon

21 août 2011
•
HTML5 / CSS3
•
3 commentaires

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

Commentaires