PREMIER TYPE DE BOUTON : LES BOUTONS TEXTES AVEC CHANGEMENTS DE COULEUR

Exemple

Accueil Articles Liens Écrire

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 {
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:200px ; /* fixe la largeur de chaque bouton à 200 pixel */
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.menu1: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 */
</style>
</head>

<body>
<a class="menu1" href="">Accueil</a>
<a class="menu1" href="">Articles</a>
<a class="menu1" href="">Liens</a>
<a class="menu1" href="">Écrire</a>

</body>
</html>

Pour tester ce script

 

COMMENTAIRES

Il s'agit d'un système de boutons très simple :

- A chaque bouton correspond un lien.

- Au naturel, il n'y a aucune couleur de fond définie pour les boutons. C'est l'objet de la redéfinition de la balise a {..}.

- Lors d'un survol (a:hover), on change la couleur du fond et de la police.

- On peut écrire les styles ci-contre a {style} et a:hover {style}, et non a.menu1 {style} et a.menu1:hover {style}. Simplement, dans ce cas, ce sont TOUS les liens de la page qui seront traités comme ces boutons.

- Si on veut restreindre cet effet de survol (roll-hover) à certains liens, on crée alors une classe (ici la classe .menu1) et on l'affecte aux seuls liens que l'on souhaite styler.

- On peut aussi multiplier les syles (.menu2, .menu3, .menu4, ....), et donc les menus et leurs apparences.