CSS Débutants

Boutons CSS

L'exemple ci-après permet de faire un bouton dont le fond change d'aspect au passage de la souris. Pas besoin de javascript ou d'applet java lourd à charger, avec les CSS la légèreté et la simplicité est de mise...

Bouton

Les styles (source css) sont à enregistrer dans une feuille de style externe selon la procédure indiquée dans le tutoriel « feuille de style de base »

Ces styles seront appelés dans la page html (source html) par l'attribut "class" placés à l'intérieur des balises <p> et <a>.

Pour faire un bouton de 150 pixels de large sur 30 pixels de haut, nous pouvons établir les codes (x)html et CSS suivants.

Source html

Pour que ce soit plus pratique, on place le(s) bouton(s) dans un cadre div auquel on va attribuer un id nommé « bouton ».

Attention, on rappelle qu'un id doit être unique dans une page. Sinon, il faut utiliser le sélecteur class.

<div id="bouton">
  <p>
  <a href="cours3.php">Bouton</a>
 </p>
</div>

Source CSS

.bouton a {
width:150px; 
height:30px; 
text-decoration:none; 
color:white;
text-align:center; 
font-weight:bold; 
background-color:#000080;
padding:5px
}

.bouton a:hover{
background-color:#0000FF;
background-image:url(aqua.jpg);
}

.bouton p{
text-align:center;
padding:5px;
}

On peut même rajouter, sans plus de poids, un effet de relief et une couleur finale différente une fois que le site a été visité :

Bouton Bouton

Source html :

<p class="bouton2">
<a href="toto.html" class="bouton2">Cliquez ici !</a>
</p>

Source css :

a.bouton2:link{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:#000080;
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

a.bouton2:visited{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:#0066FF;
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

a.bouton2:hover{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:#0000FF;
background-image:url(aqua.jpg);
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

.bouton2{text-align:center;padding:5px;}

...Ou encore une impression de bouton qui s'enfonce au passage de la souris en remplaçant "border-style:outset" par "border-style:inset" dans le "a.bouton2:hover".

Bouton

[addentum 21/12/02] : Petit truc tout bête à respecter. Si vous voulez que l'effet rendu par le survol du bouton par la souris perdure, même après visite, indiquez bien le a:hover en dernier !

En complément, un autre tutoriel, réalisé par la même, sur OpenWeb

Haut de page