Liens en tant que boutons en CSS
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 balisebutton: -
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.
- Un premier bouton très simple, qui change de couleur au passage de la souris
- Code CSS:
- Code HTML:
- Résultat:
- Un deuxième bouton , avec des bordures arrondis
- Code CSS:
- Code HTML:
- Résultat:
- Un troisième bouton, qui change donne un effet de transition lors du passage de la souris
- Code CSS:
- Code HTML:
- Résultat:
Exemples
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;
}<a href="https://apcpedagogie.com/" class="leBouton">Survolez le bouton</a>-
(Survolez le bouton avec votre souris)
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;
}<a href="https://apcpedagogie.com/" class="leBouton leBouton2">Survolez le bouton</a>-
(Survolez le bouton avec votre souris)
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;
}<a href="https://apcpedagogie.com/" class="leBouton leBouton3">Survolez le bouton</a>-
(Survolez le bouton avec votre souris)
