Licence CC 0

Une bordure animée

Ou 2 si affinité

Dernière mise à jour :
Auteur :
Catégorie :
Temps de lecture estimé : 2 minutes

Dans ce billet, je vais vous montrer rapidement comment réaliser un bouton animé par une bordure animée au hover (passage de la souris sur un lien).

Je vous invite à reproduire les étapes de ce billet sur un site de type https://jsfiddle.net ou https://codepen.io/pen.

Commençons par le plus facile, le code HTML.

1
<a class="btn-underline" href="">Mon bouton</a>

Puis une petite touche de CSS sur notre bouton.

1
2
3
4
5
6
7
8
9
a.btn-underline {
    background: #5B9CB8;
    color: #fff;
    font-size: 32px;
    padding: 6px;
    text-decoration: none;

    position: relative;
}

Maintenant passons à la phase de l’ajout de la bordure. Pour cela, on va utiliser la pseudo classe CSS after.

1
2
3
4
5
6
7
8
9
a.btn-underline:after {
    content: "";
    border-top: 6px solid #000;
    width: 100%;

    position: absolute;
    bottom: 0;
    left: 0;
}

On peut voir que l’on a bien une bordure noire dans toute la longueur (100%) du boutton. Puis à la suite, on rajoute l’animation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a.btn-underline:after {
    content: "";
    border-top: 6px solid #000;
    width: 100%;

    position: absolute;
    bottom: 0;
    left: 0;

    transform: scaleX(0);
    transition: transform 0.25s ease-in-out 0s;
}

Pour cela, on utilise 2 propriétés scaleX et une transition de 0.25 secondes. C’est la première fonction qui masque le contenu de la bordure car sa valeur est à 0.

Il existe d’autre options autres que ease-in-out (le départ et la fin sont lents) : https://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html

C’est cette animation que l’on rend seulement visible lors du hover en prenant la longeur totale avec scaleX(1).

1
2
3
a.btn-underline:hover:after {
  transform: scaleX(1);
}

On a bien notre animation lors du hover.

Pour pousser un peu plus loin l’animation, on va faire un "double underline" avec before.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a.btn-underline:after, a.btn-underline:before {
    content: "";
    width: 100%;

    position: absolute;
    left: 0;

    transform: scaleX(0);
    transition: all 0.5s ease-in-out 0s;
}

a.btn-underline:after {
    bottom: 0;
    border-bottom: 6px solid #000;
}

a.btn-underline:before {
    top: 0;
    border-top: 6px solid #000;
}

a.btn-underline:hover:after, a.btn-underline:hover:before {
    transform: scaleX(1);
}

Et un "double underline vertical" (seulement à gauche et à droite) en utilisant scaleY à la place de scaleX.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a.btn-underline:after, a.btn-underline:before {
    content: "";
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;

    transform: scaleY(0);
    transition: all 0.5s ease-in-out 0s;
}

a.btn-underline:before {
    right: 0;
    border-left: 6px solid #000;
}

a.btn-underline:after {
    left: 0;
    border-right: 6px solid #000;
}

a.btn-underline:hover:after, a.btn-underline:hover:before {
    transform: scaleY(1);
}


7 commentaires

1
transition: all 0.25s ease-in-out 0s;

Ce n’est pas idéal de mettre all pour les performances, même si ce n’est pas perceptible quand tu as peu d’élément en jeu. Je conseille de préciser la propriété sur laquelle tu veux appliquer la transition :

1
transition: transform 0.25s ease-in-out 0s;
+2 -0

Ca serait possible d’ajouter un petit js-fiddle avec le résultat du code ? Je trouve ça tjrs bien en début de tuto de savoir quel va être le résultat final qu’on cherche à obtenir :)

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Attributed to Samuel Johnson

+8 -0

Ca serait possible d’ajouter un petit js-fiddle avec le résultat du code ? Je trouve ça tjrs bien en début de tuto de savoir quel va être le résultat final qu’on cherche à obtenir :)

Demandred

En effet, je suis du même avis ou utilise ScreenToGif. ;) Et il me semble que tu peux mettre une iframe du rendu dans ton billet.

Je vous invite à reproduire les étapes de ce billet sur un site de type https://jsfiddle.net ou https://codepen.io/pen.

JS Bin est pas mal aussi, il affiche le rendu directement.

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

En effet, je suis du même avis ou utilise ScreenToGif. ;) Et il me semble que tu peux mettre une iframe du rendu dans ton billet.

Yep, il suffit de l’ajouter avec le même balisage qu’une vidéo et de demander aux validateurs d’activé cet affichage lors de la validation.

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0

Et il serait possible que tu ajoutes le CSS final à la fin ? C’est assez dur de suivre ce qu’il faut mettre, ce qui est doublon, etc. :| Edit : le code final serait dans le JSBin/JSFiddle/autre, donc inutile.

Cool billet en tout cas. :)

Édité par tleb

Alors actuellement on peut simplement inclure des iframes venant de JSFiddle en utilisant le même markdown que pour les vidéos.

Situphen

Je crois que c’est désactivé pour les billets pour raisons de sécurité.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte