IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

CSS débutants


précédentsommairesuivant

V. Boutons CSS

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>

Source HTML
Sélectionnez
<p class="bouton">
  <a href="cours3.php" class="bouton">Cliquez ici !</a>
</p>
Source CSS
Sélectionnez
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

Source HTML
Sélectionnez
<p class="bouton2">
  <a href="toto.html" class="bouton2">Cliquez ici !</a>
</p>
Source CSS
Sélectionnez
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.


précédentsommairesuivant

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 © 2005 - 2008 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.