portail du scripts- Un lien qui se transforme en bouton.

Un lien qui se transforme en bouton.

Survolez le lien avec la souris.

Etape 1 :
Ajouter entre les balises <HEAD>...</HEAD> :

On peut configurer :

le lien classique [a.bouton] par les feuilles de style suivantes,

color: navy;
font-family: arial, verdana;
font-size: 12px;
font-weight: bold ;
text-decoration: underline;
border: 2px solid white;

width: 10px;
text-align: center;

la couleur du mot lien
la police de caractères
la taille de la police
le caractère en gras (facultatif)
le soulignement classique du lien
un bord invisible de la même couleur
que l'arrière-plan.
la largeur du bouton
le centrage du texte dans le bouton

l'aspect du lien lors du survol de la souris [a:hover.bouton],

color: white;
background: navy;
border: 2px outset silver;
text-decoration: none;}

la couleur du texte du bouton
la couleur de l'arrière-plan du bouton
la taille, la forme et la couleur du bord
pour enlever le soulignement du texte

Etape 2 :
Ajouter dans le body pour réaliser l'effet.

On ajoute donc simplement class="bouton" à la balise de lien pour dire au browser de ne pas prendre les spécifications classiques des liens mais bien la présentation retenue.