07.66.26.43.21
Contact Demander un devis

Animation de bouton en hover

Catégorie

Tutoriel

Auteur: Fabson

Publié le 30/06/2022

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 !