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.
