CSS débutants

Fonctionne avec :

• FireFox
• IE 5.x et +
• NS 6/7
• Mozilla 1.x
• Opéra
• Safari

Attributs utilisés :

• background-color ; background-image
• border-color ; border-style ; border-width
• color
• float
• font-weight
• height
• padding
• text-align ; text-decoration
• width

L'exemple ci-après permet de faire un bouton dont le fond change d'aspect au passage de la souris. Cet effet, largement répandu, utilise souvent un JavaScript ou un applet java lourd à charger.
Ici, la légèreté est de mise...

Voir le résultat

Les styles (source css) sont à enregistrer dans une feuille de style externe selon la procédure indiquée ici

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>

<p class="bouton">
  <a href="cours3.php" class="bouton">Cliquez ici !</a>
</p>

a.bouton:link
{
  width:150px; 
  height:30px; 
  text-decoration:none; 
  color:white;
  text-align:center; 
  font-weight:bold; 
  background-color:#000080;
  padding:5px
}
 
a.bouton:visited
{
  width:150px; 
  height:30px;
  text-decoration:none; 
  color:white; 
  text-align:center;
  font-weight:bold;
  background-color:#000080;
  padding:5px
}
 
a.bouton: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
}
 
.bouton
{
  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é

Voir le résultat

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

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

Voir le résultat

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.