logo haut Haut de page
Alain Barraud Mémento informatique  
 
Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives

XHTML & CSS : modèles de boutons

Sommaire de la page
Bouton 1 Bouton 2 Bouton 3 avec boutons image

Bouton 1

Accueil Lien 1 Lien 2

Code css

a.bouton1
{
text-decoration: none; /* supprime le soulignement des liens */
display: block; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top: 5px; /* Crée un marge de 5 pixels en haut des boutons */
text-align: center; /* centre le texte de chaque bouton */
width: 150px; /* fixe la largeur de chaque bouton à 150 pixels */
border-style: ridge; /* défini le style de l'encadrement des boutons */
border-width: 3px; /* fixe la largeur de l'encadrement des boutons à 3 px */
padding: 2px; /* défini la marge intérieur des boutons à 2px */
}
a.bouton1:hover
{color: #FFFF00; /* change la couleur de la police lors du survol par la souris */
background-color: #0000FF;/* change la couleur du fonds lors du survol par la souris */
}

Code html

<a class="bouton1" href="#">Accueil</a>
<a class="bouton1" href="#">Lien 1</a>
<a class="bouton1" href="#">Lien 2</a>

Bouton 2

Accueil Lien 1 Lien 2

Code css

a.bouton1
{
text-decoration: none; /* supprime le soulignement des liens */
display: block; /* Crée un retour à la ligne à la fin de chaque bouton */
background-color: #C00; /* couleur du bouton */
color: white; /* couleur du texte */
font-size: 15px; /*taille du texte */
margin: 0px; /* la marge extérieure autour des boutons est =0 (les boutons se touchent) */
padding: 4px; /* la marge intérieure autour des boutons est de 4 pixels */
border: 1px solid; /* il y a une bordure solide de 1 pixel autour de chaque bouton */
border-color: red black black red; /* couleurs des 4 cotés des bordures, dans le sens des aiguilles d'une montre */
text-align: center; /* centre le texte de chaque bouton */
width: 150px; /* fixe la largeur de chaque bouton à 150 pixels */
}
a.bouton2:hover
{
border-top: 2px solid brown; /* change la couleur et l'épaisseur de la bordure haute lors du survol par la souris */
border-bottom: 2px solid #CC0005; /* change la couleur et l'épaisseur de la bordure basse lors du survol */
padding: 3px 4px 3px 4px; /* diminue la marge intérieure haute et basse du bouton survolé, pour compenser l'augmentation de la taille de la bordure */
}

Boutons 3

On commence par créer 2 images avec logiciel comme Gimp, une servira pour le bouton au repos et l'autre pour le survol.
Si bouton avec arrondis, les enregistrer en .png ou .gif.

Les 2 images (taille 150 x 35 px) : image1 et image2

Ci-dessous, l'effet donné :
Bouton 1
Bouton 2
Pour le code CSS :
- donner au sélecteur a la même taille que l'image.
- a est de type "inline", on ne peut lui affecter une taille. Il faut donc changer son statut par défaut pour lui donner celui de type "block" avec l'attribut display.
- pour pouvoir centrer le texte verticalement, au lieu de donner la hauteur avec un height, on définit une hauteur de ligne (line-height), et ainsi on peut appliquer un vertical-align:middle qui aligne le texte parfaitement.
Pour aligner les boutons horizontalement, comme a a été déclaré comme de type "block", il faudra le rendre flottant (ne pas oublier aprè un clear: both;).
Possibilité d'un décalage vertical sur le bouton survolé, mais attention prévoir débattement avec margin.

Code css

.bouton a
{
display: block;
text-decoration: none; /* supprime le soulignement des liens */
width: 100px;
line-height: 35px; /* */
text-align: center;
vertical-align: middle;
background: url(images/image1.png) no-repeat;
color: #999;
font-size: 1.2em; /*taille du texte */
float: left; /* pour des boutons alignés horizontalement */
margin: 2px 2px 4px 2px; /* si on veut, 4px en bas pour permettre débattement vertical de px au survol */
}
bouton a:hover
{
background: url(images/image2.png) no-repeat;
color: #cf0;
margin: 4px 2px 2px 2px; /* les 4px d'en bas passe en haut si on veut un débattement vertical */
}

Haut de page