Faire une flèche qui s'agrandit au survol

Que ce soit pour donner envie à vos utilisateurs de voir votre projet, de lire votre article ou d'accéder à une page de votre site internet, présenter votre lien avec une flèche vous permettra d'attirer plus facilement l'oeil de vos visiteurs ! Découvrons dans cet article comment animer cette flèche pour sublimer l'expérience de vos lecteurs.

1ère étape

Commençons, comme d'habitude avec le code HTML.

<a href="https://believemy.com" class="btn">
  <div class="arrow"></div>
  Voir le site internet
</a>

Nous créons simplement un lien avec une classe btn.
Nous mettons ensuite une division avec une classe arrow et le texte de notre lien.

2ème étape

Stylisons le lien.

.btn {
  text-decoration: none;
  font-size: 1.4rem;
  color: #ff4754;
  display: flex;
  align-items: center;
}

Nous utilisons flexbox (display: flex) pour aligner la flèche et le texte du lien côte à côte.

3ème étape

Occupons-nous maintenant de la ligne de la flèche.

.btn .arrow {
  margin-right: 1em;
  height: 0.1em;
  width: 1.5em;
  position: relative;
  background: #ff4754;
  transition: all 0.2s;
}

Ici, nous créons juste la ligne de notre flèche. Le bout de la flèche sera réalisé grâce aux pseudos-éléments ::before et ::after.

4ème étape

Stylisons le bout de notre flèche.

.btn .arrow::before,
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background: #ff4754;
  height: 0.1em;
  width: 0.6em;
}

Nous créons deux éléments qui iront se positionner en haut à droite de la ligne que nous avons créé à l’étape précédente.

5ème étape

Rotationnons chaque morceau du bout de notre flèche.

.btn .arrow::before {
  transform: rotate(45deg);
  transform-origin: right bottom;
}

.btn .arrow::after {
  transform: rotate(-45deg);
  transform-origin: right top;
}

Chaque “morceau” du bout de la flèche est positionné dans un angle différent pour donner cette impression de “flèche”.

6ème étape

Agrandissons la flèche au survol et terminons notre flèche.

.btn:hover .arrow {
  width: 5em;
}

Notre code est tellement fonctionnel et nous l’avons tellement bien pensé qu’il suffit de dire que la largeur de la ligne de notre flèche passe à 5em pour que celle-ci augmente toute seule au survol du lien.

Félicitations à nous !