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.
Commençons par le code HTML.
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon button
</a>
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).
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;
}
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).
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.
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%; }
}
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%;
}
}
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%;
}
}
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.