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

Le 19 juillet 2007

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

button-bouton-css-image

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

[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;
}
[/CSS]

Puis en insérant la classe btnImg au bouton submit

[HTML]
[/HTML]

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:


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


5 Commentaires sur "Créer des boutons images avec les CSS et l'élément button"

  • links for 2007-08-23 » Bleu-Rouge blog
    23 août 2007 (16:22)

    […] Créer des boutons images avec les CSS et l’élément button (tags: css forms buttons webdesign) […]

  • Tek
    25 juillet 2008 (10:40)

    Merci pour cet article, ça m’a permis de prouver à quelqu’un qu’on pouvait à la fois penser design, fonctionnalité dans une RIA tout en oubliant pas l’accessibilité avec des règles et des moyens très simples à mettre en place.

  • probleme
    22 juin 2009 (0:52)

    Merci pour l’article, bien que je rencontre encore des problèmes avec IE.

  • Fabien
    4 mai 2011 (14:11)

    Super ! Merci beaucoup !

  • Sow
    7 mai 2014 (21:12)

    créer un menu déroulant avec du css sans js