WebNioub

Vous souhaitez adapter les boutons de formulaires html à la charte de votre site internet ?
Vous voudriez qu’ils soient étirables en fonction de la longueur du texte contenu dans le bouton ?
Rien de plus simple ! Créez votre bouton en seulement 3 étapes !

Comment faire ?

1) Créer 2 images de fond

- la première pour le côté gauche du bouton

Hauteur : 22 px
Largeur : illimité (elle s’ajustera en fonction de la largeur du contenu du bouton)

- la deuxième pour le côté droit du bouton

Hauteur : 22 px
Largeur : 22 px

2) Intégrer le code CSS suivant :

Css :

#btn {
	background: transparent url(icones/button_left.gif) left center no-repeat;
	height:22px;
	}
 
#btn input[type="submit"]{
	background: transparent url(icones/button_right.gif) right center no-repeat;
	border: none; /* supprime le bord automatique du bouton */
	height:22px;  
 
}

L’image de fond gauche est alignée à gauche, centrée verticalement et non répétée.
L’image de fond droite est alignée à droite, centrée verticalement et non répétée.
On supprime le bord automatique du bouton.

3) Dans le code html, placer le bouton dans un id nommé “btn”

Html :

<div id="btn">
<input maxlength="2147483647" name="Valider" size="20" type="button" value="Valider" /></div>