Créer des boutons images avec les CSS et l’élément button

19 juil 2007

Tutoriaux

le 19.07.2007 à 1:52

10992 lectures

Créer des boutons images avec les CSS et l’élément button

Le bouton est un élement indissociable des formulaires et peut également servir à rendre un lien plus visible. Créer une interface ergonomique ou compréhensible avec des boutons de type Submit est souvent un tâche ardue pour le webdesigner. En effet l'affichage des boutons connait un problème d'uniformité selon le navigateur et les systèmes d'exploitation (ci-dessous les différentes formes d'un bouton suivant les configurations utilisateurs).

Nous allons voir comment créer un bouton qui ne change pas selon les configurations utilisateurs. Voici 3 méthodes:

1ere Méthode : CSS + l'élément input

La 1ere méthode utilise les CSS sur un élément input :

Voici le code qui permet de créer ce bouton

Version Texte

CSS:

.buttonImg {
width: 70px;
height: 30px;
border: none;
cursor: pointer;
background: url("btnImg.gif") no-repeat left top;
}
.buttonImg:hover {
background: url("btnImgHover.gif") no-repeat left bottom;
}

Puis en insérant la classe btnImg au bouton submit

Version Texte

HTML:

<input type="submit" name="envoyer" value=" " class="buttonImg" />

Cette solution est facile à mettre en place mais je vois 2 inconvénients: les moteurs de recherche lise le texte et non les images. Et le navigateur peut afficher le texte, le lire à voix haute, l'imprimer ou le matérialiser sur une plage braille... Vous l'aurez compris le second problème est porté sur l'accessibilité. En effet l'image, si belle soit elle ne sera jamais autant accessible que du texte pour les personnes souffrant de visibilité réduite.

2eme Méthode : CSS + l'élément button

Cette seconde méthode utilise une nouvelle fois les CSS mais cette fois-ci sur l'élément button (voir la définition W3C de l'élément button). Cet élément offre plus de possibilités en terme d'ergonomie et rend accessible le texte qui figure à l'intérieur du bouton. Voici le résultat en utilisant quelques classes CSS:

Change Password

Cancel

Cet exemple de code est issu d'un article rédigé par Kevin Hale, je vous invite à aller sur son blog pour récupérer le code HTML et le code CSS

D'autres Méthodes existent

Avec cet article d'Alex Griffioen vous verrez qu'il est possible de faire de beaux boutons avec du PNG et du CSS tout en respectant les standards ainsi que l'accessibilité. Un dernier lien si vous voulez aller plus loin: l'article Scalable CSS Buttons Using PNG and Background Colors vous permettra de créer des boutons qui se dimensionnent à la taille du texte (voir la démonstration des boutons).

Si vous avez trouvé cet article intéressant, abonnez-vous gratuitement au flux RSS d'eclaireur ou bien par email.