Lien bouton

 Un lien qui se transforme en bouton. IE4+ seul

Un lien qui se transforme en bouton au passage de la souris.

Démo : 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.