Une bordure animée
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); } |
Et il me semble que tu peux mettre une iframe du rendu dans ton billet.
