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

PLAIN TEXTCSS:

1. .buttonImg {
2. width: 70px;
3. height: 30px;
4. border: none;
5. cursor: pointer;
6. background: url("btnImg.gif") no-repeat left top;
7. }
8. .buttonImg:hover {
9. background: url("btnImgHover.gif") no-repeat left bottom;
10. }

Puis en insérant la classe btnImg au bouton submit

PLAIN TEXTHTML:

1. <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.

(more...)