Mise à jour du 24/09/2007 : Changement des CSS pour pouvoir aligner les boutons comme du texte (gauche, droite ou centré).

Pour les pressés, voici le lien vers l’exemple :

Voir la page de test des boutons

Le principe va être de passer par la balise HTML button qui permet de faire beaucoup plus que la balise input.

Rappel sur la balise button

A l’image de la balise <input type="submit" />, cette balise crée un bouton dans un formulaire permettant d’enclencher des actions.

En outre, button est un élément fermé (<button></button>).

La balise button possède un attribut type lequel admet trois valeurs :

<button type="submit"></button>

Permet de valider un formulaire.

<button type="reset"></button>

Permet de réinitialiser un formulaire.

<button type="button"></button>

Sans effet sur un formulaire. Destiné aux scripts.

Vous pouvez également consulter la DTD de l’élément button sur le site du W3C.

Découpe des images

Notre bouton va être découpé en trois zones :

• L’arrondi de gauche
• L’arrondi de droite
• La partie centrale qui permettra l’extensibilité

Dans mon exemple, les parties de gauche et droite feront 40×25 pixels et 40×1 pixels pour le fond extensible.

Structure du code HTML

Le but est de faire le plus simple possible. On place dans un paragraphe le bouton qui contiendra trois span : un pour l’image de gauche, un pour l’image de droite, un pour le fond extensible.

<p><button type="submit" class="bouton"><span><span><span>Bouton</span></span></span></button></p>

Création du bouton de formulaire en CSS

Tout d’abord, il s’agit de réinitialiser les styles par défaut de la balise button et de poser les bases du bouton que l’on va monter.

On initialise donc les marges internes, les marges externes, les bordures, la couleur de fond et l’alignement. Ensuite, on met en place l’empêchement des retours chariots et le curseur.

Le principal changement vient de la redéfinition du type de bloc. En effet, il faut définir le bouton en tant que bloc en ligne (inline-block). Cet état n’est pas pris en compte par Firefox mais celui-ci connait un équivalent propore à lui : -moz-inline-box.

button.bouton {
	display:-moz-inline-box;
	display:inline-block;
	margin:0;
	padding:0;
	font:26px/1.5 Trebuchet MS, Arial, Helvetica, sans-serif;
	white-space:nowrap;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
	border:0;
	background:none;
}

Puis on met en forme les span en placant une marge interne à gauche pour placer en fond l’image de la découpe du bouton gauche.

button.bouton span {
	position:relative;
	float:left;
	padding:0 0 0 25px;		/* Largeur du côté gauche */

	vertical-align:middle;
	background:url(bouton_gch.gif) left top no-repeat;
}

Egalement, on place une marge interne à droite pour placer en fond l’image de la découpe du bouton droit sur le deuxième span.

button.bouton span span {
	padding:0 25px 0 0;		/* Largeur du côté droit */

	background:url(bouton_dte.gif) right top no-repeat;
}

Finalement, sur le dernier span, on réinitialise les marges internes puis on place notre dernière découpe en fond avec une répétition horizontale. Et c’est également ici que l’on détermine la hauteur du bouton et l’alignement vertical du texte avec le line-height.

button.bouton span span span {
	height:40px;		/* Hauteur du bouton */

	padding:0;
	line-height:1.5;	/* Alignement vertical du texte */

	background:url(bouton_mil.gif) left top repeat-x;
}

Pour boucler le tout, on corrige les problèmes de marges sur les boutons et d’interprétrétation des CSS d’Internet Explorer.

/* Correction des bug Internet Explorer */

* html button {width:1%; overflow:visible;}
*:first-child+html button {overflow:visible;}

Création du bouton lien en CSS

Un des avantages de cette méthode et qu’elle peut également servir à créer des boutons liens. C’est-à-dire que l’on conserve la même mise en forme de bouton pour des liens simples indépendants des formulaires.

Pour ces boutons liens, la structure change. On utilise la balise a en remplacement de la balise button :

<p><a class="bouton" href="#aaa"><span><span><span>Bouton</span></span></span></a></p>

Ainsi, pour boucler le tout, nous n’avons plus qu’à doubler les appels en CSS :

a.bouton, button.bouton {
	display:-moz-inline-box;
	display:inline-block;
	margin:0;
	padding:0;
	font:26px/1.5 Trebuchet MS, Arial, Helvetica, sans-serif;
	white-space:nowrap;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
	border:0;
	background:none;
} a.bouton span, button.bouton span { 	position:relative; 	float:left; 	padding:0 0 0 25px; 	vertical-align:middle; 	background:url(bouton_gch.gif) left top no-repeat; } a.bouton span span, button.bouton span span { 	padding:0 25px 0 0; 	background:url(bouton_dte.gif) right top no-repeat; } a.bouton span span span, button.bouton span span span { 	height:40px; 	padding:0; 	line-height:1.5; 	background:url(bouton_mil.gif) left top repeat-x; } * html button {width:1%; overflow:visible;} *:first-child+html button {overflow:visible;}

Conclusion

Voici la liste des différents navigateurs où j’ai testé cette méthode avec succès :

• Internet Explorer 5.5
• Internet Explorer 6.0
• Internet Explorer 7.0
• Firefox 2.0
• Safari 1.3
• Safari 2.0
• Safari 3.0 Béta
• Opéra 9.0
• Netscape 8.1

Quels sont les avantages de cette méthode ?

• Possibilité de mise en forme des boutons sous Safari
• Possibilité de mettre des images dans les boutons
• Même aspect pour les boutons liens et bouton de formulaires
• La surface de clic est sur le bouton complet
• Effet de pressage de bouton natif sous certains navigateurs

Voir la page de test des boutons