Liens en tant que boutons en CSS

Objectif

• Être capable de changer un lien en un bouton à l'aide du langage HTML et du CSS.

Introduction

• Comme d’autres éléments HTML, CSS peut ajouter des couleurs d’arrière-plan et un remplissage aux liens nous permettant de créer l’apparence d’un bouton.
• Avec la Création du bouton lien en CSS on conserve la même mise en forme de bouton pour des liens simples indépendants des formulaires.
• Pour ces types de boutons liens, la structure change. On utilise la balise <a> en remplacement de la balise button:

Donner l'apparence d'un lien à un bouton

• Comme d’autres éléments HTML, CSS peut ajouter des couleurs d’arrière-plan et un remplissage aux liens nous permettant de créer l’apparence d’un bouton.
Exemples

1. Un premier bouton très simple, qui change de couleur au passage de la souris
   • Code CSS:

     a.leBouton {
     text-decoration: none;
     padding: 10px 30px;
     background-color: blue; 
     color: white;
     border: 1px solid gray;
     border-style:inset;
     }
     a.leBouton:hover {
     background-color: yellow;
     color:red;
     
     }

2. Code HTML:

   <a href="/" class="leBouton">Survolez le bouton</a>

3. Résultat:
   (Survolez le bouton avec votre souris)
   Survolez le bouton
4. Un deuxième bouton , avec des bordures arrondis
   • Code CSS:

     a.leBouton {
     text-decoration: none;
     padding: 10px 30px;
     background-color: blue; 
     color: white;
     border: 1px solid gray;
     border-style:inset;
     }
     a.leBouton2
     {
     border-radius: 12px;
     border: 2px solid #46a28d;
     }
     a.leBouton:hover {
     background-color: yellow;
     color:red;
     }

5. Code HTML:

   <a href="/" class="leBouton leBouton2">Survolez le bouton</a>

6. Résultat:
   (Survolez le bouton avec votre souris)
   Survolez le bouton
7. Un troisième bouton, qui change donne un effet de transition lors du passage de la souris
   • Code CSS:

     a.leBouton {
     text-decoration: none;
     padding: 10px 30px;
     background-color: blue; 
     color: white;
     border: 1px solid gray;
     border-style:inset;
     }
     a.leBouton3
     {
     border-radi
     us: 12px;
     border: 2px solid #46a28d;
     }
     a.leBouton:hover {
     background-color: yellow;
     color:red;
     }

8. Code HTML:

   <a href="/" class="leBouton leBouton3">Survolez le bouton</a>

9. Résultat:
   (Survolez le bouton avec votre souris)
   Survolez le bouton