Back

Liens en tant que boutons en CSS

Liens en tant que boutons en CSS

  1. Objectif

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



  2. 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 :
  3. 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;
            
            }
        • Code HTML:
          • <a href="https://apcpedagogie.com/" class="leBouton">Survolez le bouton</a>
        • Résultat:
      2. 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;
            }
        • Code HTML:
          • <a href="https://apcpedagogie.com/" class="leBouton leBouton2">Survolez le bouton</a>
        • Résultat:
      3. 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;
            }
        • Code HTML:
          • <a href="https://apcpedagogie.com/" class="leBouton leBouton3">Survolez le bouton</a>
        • Résultat:



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement