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.
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
.
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.
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
.
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.
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”.
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 !
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.