Voici comment créer un hover très moderne sur un lien facilement ! Il y a beaucoup d'effets possibles sur les boutons et sur les liens : plus ils sont réussis, plus vos utilisateurs vont avoir l'envie de cliquer dessus.
Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.
Commençons par le code HTML.
<a href="#">Lire l'article</a>
Tellement simple qu'on se passe d'explications. Vous pour aussi utiliser une classe à la place de sélectionner directement la balise a.
Il nous faut maintenant styliser notre lien pour commencer à lui donner du style.
a {
text-decoration: none;
color: black;
font-size: 1.4em;
position: relative;
padding: 0 15px;
transition: .2s all;
font-weight: 300;
}
Ajoutons une petite bordure avant le texte, grâce au sélecteur ::before qui permet d'effectuer diverses propriétés sur un espace qui se situe avant l'élément.
a::before {
content: '';
position: absolute;
background: #4cd3c2;
width: 2px;
height: 100%;
left: 0;
transition: .2s all;
z-index: -1;
}
En utilisant la propriété content, on permet l'affichage de la bordure, car sinon le navigateur n'affichera rien, l'élément étant vide.
On définit ensuite la bordure en position absolute. Grâce à la position relative définie sur le lien (a), la bordure va s'adapter au lien et non à la page.
Enfin, on lui donne un z-index de -1 pour que la bordure se cache en-dessous du texte dans la prochaine étape.
On dynamise l'ensemble !
a:hover::before {
width: 100%;
}
a:hover {
color: #ffffff;
font-size: 1.6em;
}
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.