Un lien qui se transforme en bouton au passage de la souris.
Démo : Survolez le lien avec la souris.
Table des matières
Etape 1 :Ajouter entre les balises <HEAD>...</HEAD> :
<style type="text/css"> a.bouton { color: navy; font-family: arial, verdana; font-size: 12px; font-weight: bold ; text-decoration: underline; border: 2px solid white; width: 10px; text-align: center; padding: 2px; position: relative; } a:hover.bouton { color: white; background: navy; border: 2px outset silver; text-decoration: none;} </style>
On peut configurer :
Etape 2 :Ajouter dans le body pour réaliser l'effet.
<a class="bouton" href="lien.html">Lien</a>
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.