Article complet: Créer des boutons avec les CSS3

Je bloggue de manière très irrégulière. Il y a quelques temps de cela j'avais fait un peu de "teasing" sur un billet concernant la création de boutons en utilisant uniquement les CSS3, et surtout sans utiliser aucune image. Je pensais publier un billet explicatif quelques jours plus tard... Et là je m'aperçoit aujourd'hui que ce billet datait de plus de 4 mois et que je n'avais toujours rien publié !

Bien sûr depuis le temps j'ai égaré les sources qui m'avaient servit d'exemple à l'époque. J'ai du refaire tout cela ce qui implique quelques petites différences dû à des différences au calibrage des effets.

En fait entre temps j'avais voulu profiter de l'occasion pour présenter plus en profondeur les principales nouveautés des CSS3, mais la tâche s'avère bien plus fastidieuse que je ne le pensais. Je vais donc me contenter de détailler pas à pas la création d'un tel bouton...

[Suite:]

Cette démo utilise Firefox 3.6, car son moteur Gecko est le seul à supporter pleinement les propriétés CSS3 que j'ai utilisé pour créer ces boutons. Je vous conseille donc de l'utiliser avec ce navigateur si possible. Dans tous les cas une image de référence accompagne chaque étape de cette démo. Le lien vers la démo complète est disponible à la fin de l'article.

Avant de commencer, j'aurais quand même deux petites remarques :

• Le fait que j'utilise Firefox comme navigateur de référence n'implique pas qu'il est plus avancée que ses concurrents sur les CSS3, mais uniquement sur les propriétés que j'utilise pour cette demo. Les CSS3 étant toujours en cours d'élaboration, ceci n'est ici qu'à titre informatif et l'objectif n'est pas de (re)lancer un débat sur les navigateurs. Pour l'instant l'implémentation des CSS3 permet de proposer des demos technologiques plutôt qu'une réelle utilisation du fait de l'absence de recommandation finale...
• Les travaux sur les CSS3 n'étant pas terminé, ses propriétés peuvent encore évoluer d'ici la recommandation finale. Afin d'éviter tout conflit ultérieur les différents moteurs de rendu utilisent des attributs propriétaires qui se distinguent par un préfixe particulier (-moz- pour Gecko, -webkit- pour Webkit, ...). Pour simplifier la lecture j'ai utilisé les noms de propriétés des CSS3, mais il faut bien sûr utiliser les équivalent propriétaire pour tester cela (par exemple border-radius devra être remplacé par -moz-border-radius pour fonctionner sur les navigateurs basé sur le moteur Gecko de Mozilla, -webkit-border-radius pour ceux basé sur WebKit, etc.

Passons donc aux explications :

Description	Image	Rendu réel
Commençons tout simplement par appliquer les styles de bases, reconnu par la plupart des navigateurs, et qui nous permettent d'obtenir un simple bouton rectangulaire : cursor: pointer;  text-decoration: none;  display: inline-block;  font-weight: bold;  color: #fff;  background-color: #bbb;  padding: 4px 14px 6px;  A noter qu'Internet Explorer 8 s'arrêtera là, puisqu'il ne possède aucune implémentation des CSS3.		bouton
Nous allons maintenant utiliser la propriété border-radius qui permet d'appliquer un arrondi aux coins d'un élément, en spécifiant les longueurs des rayons de l'ellipse qui formera l'arrondi. Le premier nombre correspondant au rayon horizontal et le second au rayon vertical, ce qui permet de donner un aspect incurvé. border-radius: 1em / 2em;  Il est possible de définir jusqu'à 4 valeurs pour chaque rayon, afin de donner une valeur différente à chaque coin de l'élément. A noter que les premières versions de Webkit utilise un autre format pour cette propriété, car les spécifications ont évolué depuis leurs première implémentation (d'où l'importante d'utiliser les préfixes propriétaires).		bouton
La propriété text-shadow permet de rajouter un ombrage sur du texte, afin de le mettre en valeur. Elle attend 4 paramètres. Les deux premières valeurs correspondent au décalage de l'ombrage par rapport au texte. Le troisième correspond au rayon du flou a appliquer à l'ombrage, et enfin le dernier correspond à la couleur de cet ombrage. Ici on applique un flou important sur un ombrage sans aucun décalage, ce qui applique une légère ombre tout autour du texte : text-shadow: 0 0 5px #000;  Pour l'anecdote text-shadow n'utilise pas de préfixe car elle était déjà utilisé, puisqu'il s'agit en fait d'une propriété des CSS2 qui fait son retour après avoir été supprimé des CSS2.1.		bouton
De même, on peut utiliser text-shadow pour un ombrage plus prononcé en bas à droite du texte : text-shadow: 1px 1px 1px #000;		bouton
Et puisque la propriété text-shadow accepte de multiples valeurs séparées par une virgule, on peut cumuler les effets pour donner encore plus de relief à notre texte : text-shadow: 0 0 5px #000, 1px 1px 1px #000;		bouton
La propriété box-shadow est équivalente à text-shadow, si ce n'est qu'elle s'applique à une boite et non pas seulement au texte. Par exemple on pourrait utiliser ceci pour donner un ombrage à notre bouton : box-shadow: 1px 1px 2px #000;		bouton
Mais la propriété box-shadow peut également s'appliquer à l'intérieur de la boite en utilisant le mot-clef inset : box-shadow: inset 0 1px 4px #666;  Cette possibilité s'avère très intéressante car elle permet d'appliquer des ombres à l'intérieur de l'élément pour un effet encore plus prononcé. Note : les navigateurs basés sur Webkit supportent bien -wekbit-box-shadow, mais pas sa propriété inset.		bouton
En utilisant conjointement avec rgba(), qui nous permet de définir une couleur avec un niveau alpha de transparence, on peut se permettre d'appliquer des ombres plus importantes qui, par effet de transparence s'adapteront bien à la couleur de fond du bouton : box-shadow: inset 0 -6px 6px rgba(0,0,0,0.5);		bouton
Tout comme text-shadow, on peut cumuler les effets, ce qui nous donne un bon effet de relief pour finaliser notre bouton : box-shadow: 1px 1px 2px #000,    inset 0 1px 4px #666,    inset 0 -6px 6px #666;		bouton
Il ne reste plus qu'à changer la couleur de fond du bouton lors du passage de la souris ou du clic, ce qui donnerait quelque chose comme cela (les styles dont mis en ligne et ne permettent pas cela dans un billet - voir un peu plus bas la demo pour un résultat en direct) : background-color: #9ac700;		bouton
background-color: #ff7f50;		bouton

Et voilà !

N'hésitez pas à consulter le code source de la demo HTML pour plus d'exemple d'utilisation et pour voir l'effet rollover en vrai. La plupart des boutons sont basées sur les mêmes principes, et se distinguent uniquement via quelques différences de paramétrages des effets (arrondis plus ou moins prononcés, ombres plus ou moins grande).

Il resterait beaucoup de chose à présenter sur les CSS3, qui mériterait chacun leurs propres billets :

• Les selectors CSS3 qui permettent une sélection bien plus poussé des éléments.
• La possibilité de cumuler plusieurs background-images sur un même élément.
• border-image qui permet d'utiliser une image pour dessiner les bordures d'une boite, tout en conservant un design fluide (les bordures s'adaptent à la taille de la boite). Le tout en toute simplicité...
• Les transformations 2D et 3D à appliquer sur les élements.
• Les effets de transitions qui permettent d'animer les changements d'états.
• L'utilisation d'image au format SVG comme background-image, ce qui permet des effets bien sympa (même si cela sort un peu du cadre des CSS3 qui ne précise pas de format d'image).
• etc.