Créer des boutons attrayants et redimensionnables

En matière de réalisation, il existe plusieurs chemins pour arriver au même résultat. La plupart du temps, c'est une question de préférence par rapport à l'élément que vous souhaitez utiliser pour un point précis. J'ai moi aussi des préférences. L'une d'entre elles est de privilégier l'élément button par rapport à l'élément input de type submit. Pourquoi ? Parce que le W3C le dit : "Les boutons créés avec l'élément button fonctionnent de la même manière que ceux créés avec input, mais ils offrent de plus riches possibilités au niveau du rendu."

C'est ce rendu qui m'intéresse. Vous pouvez facilement appliquer des techniques de remplacement d'image sur des boutons pour rendre votre formulaire attractif. La fonctionnalité la plus intéressante est que l'élément button peut posséder un contenu. C'est cette possibilité que je vais utiliser dans ce tutoriel.

L'objectif est donc de créer un bouton attractif pouvant gérer des tailles variables afin de ne pas avoir à faire de modifications ultérieures. Nous allons traiter l'élément button comme un conteneur et ajouter quelques balises.

Le voici :

<button><span><em>Texte du bouton</em></span></button>

Ce code est valide et fournit largement de quoi travailler.

Notez que j'utilise deux éléments enfants au lieu d'un car je n'ai pas réussi à me débarrasser d'un remplissage conservé par le bouton. Si l'un d'entre vous réussi à le concevoir avec un seul élément enfant, n'hésitez pas à me contacter :)

Ce concept vous est probablement familier car il apparaît dans de nombreuses techniques de design. Nous avons une longue image de fond :

Celle-ci fait 55Opx de large. Je pense que cela devrait suffire pour des boutons :).
Donc, nous utilisons cette image comme arrière-plan d'un élément supérieur (un span dans notre cas), le plaçons dans le coin supérieur gauche et ajoutons du remplissage (padding) à gauche. L'élément imbriqué (em dans ce cas) possède le même arrière-plan mais il est placé en haut à droite avec un remplissage à droite. Le bouton se redimensionne donc en même temps que le texte.

La hauteur du bouton est fixe dans mon exemple mais vous pouvez utiliser une technique similaire avec quelques balises supplémentaires, et placer le même arrière-plan à chaque coin.
Pour s'assurer de l'alignement vertical du texte, j'utilise la propriété line-height.

button
{
  border:none;
  background:none;
  padding:0;
  margin:0;
  width:auto;
  overflow:visible;					
  text-align:center;	
  white-space:nowrap;	
  height:40px;
  line-height:38px;			
}

button span, button em
{
  display:block;
  height:40px;
  line-height:38px;			
  margin:0;
  color:#954b05;
}

Remarquez que la valeur des propriétés height et line-height sont différentes. C'est à cause de l'ombre de 2px en dessous. La propriété line-height centre le texte verticalement, ombre exclue.

button span
{
  padding-left:20px;
  background:url(bg_button.gif) no-repeat 0 0;
}	
 
button em
{
  font-style:normal;
  padding-right:20px;
  background:url(bg_button.gif) no-repeat 100% 0;
}

Comme je l'ai mentionné plus haut, il serait plus élégant d'utiliser uniquement button et span, mais je n'ai pas pu me débarrasser des remplissages du button. Si l'un d'entre vous trouve une solution utilisant un seul élément enfant, faites le moi savoir.

Voir le résultat en ligne.
Télécharger la source.

Tous mes remerciements à Hikage pour sa relecture.