Boutons graphiques en CSS

Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons graphiques étaient animés par un JavaScript ou pire (car plus lourd) par un applet java.

Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons.

N'hésitez pas à nous faire part de votre avis sur cet article : 11 commentaires Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

I. Compatibilité

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés:
  • background ;
  • color ;
  • display ;
  • float ;
  • line-height ;
  • margin ;
  • padding ;
  • text-align ; text-decoration ;
  • vertical-align ;
  • width.

II. Bouton CSS simple

II-A. Code (X)HTML

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 :

 
Sélectionnez

<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.

Image non disponible

II-B. Code CSS

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.

 
Sélectionnez

.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;
}
                
Image non disponible

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.

III. Plusieurs boutons CSS

Etant donné que les liens ont été déclarés de type "block", à chaque balise a il y aura un saut de ligne. Si on veut faire plusieurs boutons les uns en dessous des autres, ce n'est pas un problème. En revanche, si l'on veut qu'ils soient alignés horizontalement, il va falloir rajouter quelques petites choses dans le code CSS.

On va tout simplement les rendre flottants. Attention cependant à bien rajouter un clear:both dans l'élement HTML qui suivra pour éviter des choses désagréables...

Il faudra donc rajouter ceci au code du sélecteur a.

 
Sélectionnez

float:left;
margin:2px;          
            

Les marges ne sont pas obligatoires, c'est juste pour que les images ne se touchent pas.

Image non disponible

Voir le résultat !

IV. Lectures complémentaires

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 21/07/2010 Pascale Lambert. 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.