Créer un bouton, c'est bien ! Mais créer un bouton sur lequel vos visiteurs ont envie de cliquer, c'est déjà autre chose. Ce bouton de type néon attirera en tout cas l'oeil de tout ceux qui visiteront vos pages.
Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.
1ère étape
Commençons par le code HTML.
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon button
</a>
2ème étape
Avant de continuer, assurons-nous que tous nos éléments n'est pas de problèmes lorsque nous leur donnons un padding.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}Cette petite astuce permet de dire que tous les éléments du site doivent intégrer leurs paddings dans leur taille (ça évite beaucoup de problèmes).
3ème étape
Stylisons notre lien.
a{
position: relative;
padding: 25px 30px;
margin: 40px 0; color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s; letter-spacing: 4px;
overflow: hidden; margin-right: 50px;
}
a:hover{
background: #03e9f4; color: #050801;
}
4ème étape
Sylisons maintenant la première balise span.
a span{
position: absolute;
display: block;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#03e9f4);
animation: animate1 1s linear infinite;
}Les bords du bouton ne bougent pas vraiment dans le sens des aiguilles d'une montre : il s'agit en fait de 4 balises span qui apparaissent et disparaissent successivement les unes à la suite des autres.
Si vous avez du mal avec la prochaine étape dans la création d'une animation, vous pouvez apprendre comment faire grâce à cette vidéo spécialement réalisée pour l'occasion : Créer facilement des animations (CSS).
5ème étape
Occupons-nous de la première animation.
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}Ici on dit que la balise span apparaît progressivement de la gauche vers la droite, ce qui donne cette illusion.
6ème étape
Recommençons pour la deuxième balise span.
a span:nth-child(2){
top: -100%; right: 0;
width: 2px; height: 100%;
background: linear-gradient(180deg,transparent,#03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes animate2{
0%{ top: -100%; }
50%,100%{ top: 100%; }
}
7ème étape
Continuons pour la troisième balise span.
a span:nth-child(3){
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.50s;
}
@keyframes animate3{
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}
8ème étape
Finissons en faisant pareil avec la quatrième balise span.
a span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes animate4{
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}
