Créer un bouton NÉON avec CSS

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.

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

1ère étape

Commençons par le code HTML.

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.

CSS

*{
    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.

CSS

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.

CSS

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.

CSS

@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.

CSS

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.

CSS

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.

CSS

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

Catégorie : Développement