Utilisez des boutons CSS3 en forme de bonbon

21 août 2011

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

  • C’est vrai que ces boutons en css3 sont vraiment magnifiques et très bien réalisés pas de soucis avec ça.

    Par contre ce qui me gène et qui fais que je ne mettrai pas ce genre de bouton en place, c’est quand même l’affichage sur ie (vesrion7 chez moi), qui est juste pas possible. Je pense que c’est un point important, souvent trop mis de côté.

    Mais je te l’accorde, graphiquement c’est ça en jète !;)

  • Guidraw

    Très beau !

  • Le bouton bleu fait surtout penser à du viagra plus qu’à un bonbon ^^