Boutons graphiques en CSS

Un bouton étant en général utilisé pour faire un lien vers une autre page, les sélecteurs exploités dans le code CSS seront a et a:hover pour le changement d'aspect au survol du bouton (si changement souhaité bien sûr...).

Pour un seul bouton, le code HTML peut être le suivant :

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

Prenons maintenant deux images dont l'une servira pour le bouton au repos, et l'autre pour le survol.

Ces deux images ayant une taille de 150 pixels sur 50, il va falloir donner au sélecteur a la même taille. Petit problème, a est de type "inline", on ne peut lui affecter de taille. Il va donc falloir lui changer son statut par défaut pour lui conférer un comportement de type "block". On utilisera pour cela l'attribut display.

Autre astuce, pour pouvoir centrer le texte verticalement, au lieu de donner la hauteur avec un height, on va définir une hauteur de ligne (line-height), et ainsi on pourra appliquer un vertical-align:middle qui alignera le texte parfaitement.

.bouton a {
  display:block;
  width:150px;
  line-height:50px;
  text-align:center;
  vertical-align:middle;
  background:url(images/bouton-noir.png) no-repeat;
  color:white;
  text-decoration:none;
}
.bouton a:hover {
  background:url(images/bouton-noir-2.png) no-repeat;
}

Voir le résultat !

N'est-ce pas superbe ?!! Non ???? Oui bon, d'accord, côté design je suis une bique ;-p. Vous ferez bien entendu de magnifiques images de boutons pour un rendu bien plus sexy.