Créer un hover très moderne sur un lien

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.

1ère étape

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.

2ème étape

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;
}

3ème étape

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.

4ème étape

On dynamise l'ensemble !

a:hover::before {
  width: 100%;
}
a:hover {
  color: #ffffff;
  font-size: 1.6em;
}