[Webdesign] Des boutons personnalisés sans images « à la Gmail »

Il y a quelques jours, Google a mis en ligne une nouvelle version de Gmail. Changement notable, l’interface graphique arbore de nouveaux boutons très pratiques et surtout très jolis.

Ces boutons sont le fruit d’une expérimentation de Google pour construire des boutons personnalisés sans s’appuyer sur les contrôles natifs, ni les images. On les retrouve d’ailleurs dans Google Reader également.

Ils ressemblent beaucoup à des boutons « images ». Mais pourtant ils sont quelques peu différents car ils ne s’appuient que sur du code HTML et CSS pour l’apparence et une once de Javascript pour le comportement. Ceci les rend d’ailleurs très personnalisables via des « skins » CSS en fonction de l’endroit où ils se trouvent (mécanisme utilisé par les thèmes de Gmail).

Plutôt que de créer le gradient en utilisant une image, les boutons simulent celui-ci en superposant plusieurs bandes de couleurs différentes.

Pour créer ces bandes en HTML, il faut insérer un élément supplémentaire dans le code du bouton.
Chez Google, il s’agit d’un élément <b>, choisi pour sa compacité et que surtout sémantiquement il ne veut rien dire.

En positionnant cet élément de manière absolue en bas du bouton et en utilisant une couleur particulière (#e3e3e3 ici), nous obtenons le résultat ci-dessus. La bande centrale est une bordure « top » de couleur. La bande du haut est une simple bande presque blanche (#f9f9f9).

Plutôt sympa, notamment pour personnaliser ses interfaces sans recourir à différentes images. Reste à voir si cela fonctionne dans tous les navigateurs et ce qu’il en est coté accessibilité.

Crédits: Stopdesign