Animation de bouton en hover
Dans ce tuto, je vais montrer quelques idées d’animation de bouton en hover pour apporter un peu de créativité dans un site web.
1er exemple: effet encadré
Au survol, une ligne va faire le tour du bouton rectangulaire et repartir dans l’autre sens à la sortie. Pour avoir cet effet, il faut jouer avec les pseudo-éléments before et after qui auront certains côtés cachés, leur largeur et leur hauteur varieront avec des petits delays qui donneront l’illusion du mouvement continu.
Alors décomposons tout cela:
– nous avons le bouton (ici un div)
– un before qui a un border de 2px mais pas de fond et dont le border-left et le border-bottom sont cachés
– un after qui a aussi un border de 2px, sans fond et cette fois-ci le border-top et le border-right cachés
L’astuce va consister à décaller les transitions sur le width et le height de chacun des pseudo-éléments dans les 2 sens: dans le MouseEnter (le survol) et le MouseLeave (la sortie). Il y aura aussi une transition sur l’opacité pour ne pas qu’on voit les 2 points correspondant aux border de 2px à l’état de départ. Les transitions sont appliquées sur les hover puisque cela correspond au survol, au MouseEnter.
Séquence Aller
1ere séquence aller – MouseEnter
div:hover::before {
width:calc(100% – 2px);
height:calc(100% – 2px);
opacity:1;
transition: opacity 0s ease-out, width 0.1s ease-out, height 0.1s ease-out 0.1s;
}
2ème séquence aller – MouseEnter
div:hover::after {
width:calc(100% – 2px);
height:calc(100% – 2px);
opacity:1;
transition: opacity 0s ease-out 0.2s, width 0.1s ease-out 0.2s, height 0.1s ease-out 0.3s;
}
Séquence Retour
3ème séquence : départ du retour sur l’after – MouseLeave
div::after {
border: 2px solid #CC2929;
border-right:none;
border-top: none;
opacity:0;
transition: opacity 0s ease-out 0.2s, height 0.1s ease-out, width 0.1s ease-out 0.1s;
}
4ème séquence: départ du retour sur le before – MouseLeave
div::before {
border: 2px solid #CC2929;
border-left:none;
border-bottom: none;
opacity:0;
transition: opacity 0s ease-out 0.4s, height 0.1s ease-out 0.2s, width 0.1s ease-out 0.3s;
}
See the Pen Animation Hover – Border Lines by Fabrice ROCCASERRA (@Fabson) on CodePen.
2EME exemple: animation du background
Cette fois l’idée est de donner un effet zoom avec viseur quand on survole le bouton. Pour cela on va utiliser plusieurs propriétés du Background:
– La propriétés Background-position en arrière-plans multiples (ici 4)
– La propriété Background-size pour déterminer l’épaisseur (en fait la hauteur) et la longueur des parties visibles
– Et enfin Background-image avec des Linear-gradient pour créer le contenu du background
Background-position
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
Nos 4 arrières plans sont positionnés dans les coins de notre bouton.
Background-size
Le paramétrage avec 2 valeurs correspond à la largeur et la hauteur: « 2px 100% » signifie donc que la largeur est de 2px et la hauteur de 100%.
background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
Au final, nous avons un cadre de 2px qui encadre notre bouton.
Background-image
Nous allons maintenant remplir nos bouts de cadre avec un dégradé, un linear-gradient qui va être construit en plusieurs parties:
– d’abord la direction en deg: 0deg signifie une direction de bas en haut, 90deg de gauche à droite, etc…
– ensuite il y aura des parties pleines avec la couleur choisie (ici une variable appelée clr-border) entre plusieurs points exprimés en % et des parties transparentes pour créer des espaces vides.
background-image:
linear-gradient(0deg, var(–clr-border), var(–clr-border) 35%, transparent 35%, transparent 65%, var(–clr-border) 65%),
linear-gradient(90deg, var(–clr-border), var(–clr-border) 15%, transparent 15%, transparent 85%, var(–clr-border) 85%),
linear-gradient(180deg, var(–clr-border), var(–clr-border) 35%, transparent 35%, transparent 65%, var(–clr-border) 65%),
linear-gradient(270deg, var(–clr-border), var(–clr-border) 15%, transparent 15%, transparent 85%, var(–clr-border) 85%);
Pour l’effet en hover, il suffit d’agrandir la zone du bouton, de modifier le font-size, le backgroud-size pour avoir des traits à 5px d’épaisseur et de modifier les pourcentages des linear-gradient pour garder un effet proportionnel des cadres du viseur.
Pour la transition et pour avoir un effet dynamique, un peu élastique, on va utiliser une courbe de bézier qui « déborde » au départ et à l’arrivée:
transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
See the Pen Untitled by Fabrice ROCCASERRA (@Fabson) on CodePen.
3eme exemple: effet boule
Dans ce 3ème exemple, plus simple, on va avoir un effet de transition en « boule », ça peut être utilisé comme animation au click, pour montrer que le click a été pris en compte.
Ici, la transition va simplement se faire sur la largeur du bouton et sur la transparence et la taille du texte avec un effet « élastique » pour dynamiser.
See the Pen Animation hover – Rounded by Fabrice ROCCASERRA (@Fabson) on CodePen.
4eme exemple: effet déroulé en zoning
Dans ce dernier exemple, on mélange un peu les effets: un effet zoom/zoning avec une apparition du bouton en largeur et un décalage de delays des bordures pour un effet « mécanique automatique ».
Ici, les bordures sont créées sur des pseudo-éléments before et after autour du bouton dont la largeur va varier au survol. il y a 3 div en rangée, la première et la dernière ayant les pseudo-éléments correspondant aux bordures à animer. Le div central est le bouton à proprement parlé.
See the Pen Untitled by Fabrice ROCCASERRA (@Fabson) on CodePen.
Voilà quelques exemples d’animation de bouton en hover, il y a encore plein de choses à imaginer, le CSS étant très puissant, à nous d’inventer des effets sympas !