Créer des boutons attrayants et redimensionnables

Date de publication : 19/03/2008

Par Alen Grakalic (CSS Globe)
Johann Blais (traducteur) (Site perso)

Ce tutoriel a pour but de vous montrer comment personnaliser vos boutons avec des images et que du CSS.

Version PDF (Miroir) Version hors-ligne (Miroir)

Introduction
Code (X)HTML
Le concept
Code CSS
Remerciements

Introduction

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.

Code (X)HTML

Le voici :

Code (X)HTML du bouton


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

Le concept

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.

Code CSS

Code de réinitialisation du style du bouton


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

Paramétrage des éléments enfants


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.

Définition des arrière-plans et remplissages pour les deux éléments enfants


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.

Remerciements

Tous mes remerciements à Hikage pour sa relecture.

Version PDF (Miroir) Version hors-ligne (Miroir)

(1)	Cet article a été publié à l'origine, le 4 mars 2008, en version anglaise et est visible à l'adresse suivante : Creating and Styling Resizable Buttons

Copyright © 18/03/2008 CSS Globe. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.