Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Boutons CSS

Bouton CSS simple

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 :

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

À noter qu'avec les CSS3, on peut réaliser les mêmes effets dégradés avec background-image:linear-gradient() sans avoir besoin d'images.

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.

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

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.

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.

float:left;
margin:2px;

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

Cependant pour ce type de présentation souvent utilisé pour un menu, il vaut mieux utiliser un balisage de liste plutôt que d'utiliser un paragraphe. Je vous invite donc à parcourir le tutoriel : "menu horizontal en CSS".

Lectures complémentaires

• Bouton et boutonnière verticale, réalisé par la même, sur OpenWeb
• Créer un bouton en CSS3 sans image (CSS3 Create)
• 10 tutos pour créer des boutons en CSS
• Bouton en CSS avec l'élement button

Haut