Liste des Tutoriaux



Bouton CSS

En bref

Pour créer un bouton changeant d'aspect au passage de la souris, on peut utiliser les styles légers et accessibles.

Pour créer un bouton changeant d'aspect au passage de la souris, nombreux sont les sites utilisant des javascripts, ou du flash, inaccessibles et gourmands en bande passante. Ces méthodes peuvent être très avantageusement remplacées par les styles qui ne présentent pas ces inconvénients.

Les techniques décrites ci-après fonctionnent avec les navigateurs modernes (MSIE 5.x, Netscape 6 et 7, Mozilla 1.x, Opéra 7). Avec Opéra 5.x et 6.x les images de fond ne seront pas chargées.

Document annexe : page de test.

Bouton simple

Ce premier exemple permet de créer un bouton de navigation dont le fond sera agrémenté d'une image lors du passage de la souris.

illustration de l'effet :hover sur un bouton css simple

Les caractéristiques communes de l'aspect du lien sont déclarées dans a.bouton, l'effet de changement de couleur et d'image de fond sont indiquées ensuite à l'aide de la pseudo classe :hover. A noter que cette image peut-être fixe ou animée.

source XHTML

<p>

  <a href="#" class="bouton">Retour</a>
</p>
    

Source CSS


a.bouton {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
a.bouton:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
}
      

Tester le résultat (bouton simple).

On peut aussi compléter l'aspect du bouton à l'aide de a.bouton:active pour l'instant du click et a.bouton:visited pour son aspect après visite de la page liée. Attention : veillez à mettre le style a.bouton:hover en fin de code si vous voulez que celui-ci reste actif même après l'activation du bouton !

Bouton en relief

Pour un effet de relief d'un bouton qui s'enfonce au passage de la souris, on rajoutera des attributs de style de bordures : outset pour en effet relief vers l'extérieur et inset pour un effet relief inverse.

bouton en relief qui semble s'enfoncer au passage de la souris

source CSS

a.bouton-relief {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
}
a.bouton-relief:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}
      

Tester le résultat (bouton en relief).

« Boutonnière »

Les techniques précédentes sont adaptées à un bouton isolé dont la taille s'adapte à la longueur du texte. Mais si l'on veut faire un menu vertical, on cherche en général à faire des boutons de même taille.

menu en bouton css

Ceci se fait sans difficulté grâce à l'attribut display:block, dont le principe est détaillé dans l'article boîtes bloc, boîtes en ligne et propriété display.

source XHTML

<p>
  <a href="#" class="vertical">Sommaire</a>
  <a href="#" class="vertical">Bla bla</a>
  <a href="#" class="vertical">Retour</a>

</p>
    

source CSS

a.vertical {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
a.vertical:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}
    

Variante

Pour éviter de marquer à chaque lien class="vertical", on peut coder comme ceci :

source XHTML
<div class="vertical">
  <p>

    <a href="#">Sommaire</a>
    <a href="#">Bla bla</a>
    <a href="#">Retour</a>
  </p>

</div>
      
source CSS
.vertical a {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
.vertical a:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}
        

Tester le résultat (bouton en relief, variante).


Une question, une remarque ? Écrivez à l'auteur à pascale.lambert@openweb.eu.org.





Liste des Tutoriaux

Pour vous accompagner dans l'utilisation de vos kits graphiques, Kitgrafik a sélectionné sur le web d'excellents tutoriaux qui abordent les sujets essentiels. Les tutoriaux sont classés par niveau d'expertise et restent sous le copyright de leur auteurs respectifs, que nous remercions. Pour vous perfectionner et découvrir de nouvelles techniques, nous vous recommandons chaudement cette liste RSS de tutoriaux. Nous cherchons en permanence les meilleurs sites de design et nous concentrons leurs derniers tutoriaux ici : 40 superbes tutoriaux du web (RSS) -- New --

Autres ressources

  1. 40 superbes tutoriaux du web (RSS) -- New --
  2. http://normandlamoureux.com/cours/xhtml
  3. http://www.mammouthland.net
  4. http://fr.selfhtml.org/
  5. http:/fr.html.net/tutorials/css/
  6. http://pompage.net/pompe/listes/