Vous n'êtes pas sans savoir que seules certaines propriétés bénéficient de bonnes performances dans les navigateurs, à savoir opacity et transform. Nous allons donc utiliser la propriété opacity pour appliquer une transition optimisée.
L'astuce est simple. Nous avons un bouton sur lequel nous souhaitons obtenir une ombre portée au survol. Nous ajoutons le pseudo-élément ::after sur le bouton, qui contiendra l'ombre portée. Nous allons faire en sorte que celle-ci soit invisible au départ en déclarant une valeur nulle à la propriété opacity.
Enfin, lorsque le bouton se trouve en état de survol, nous modifions la valeur de la propriété opacity afin que cette dernière soit positive et devienne ainsi visible.
<button>
<span>Survolez-moi</span>
</button>
button {
all:unset;/*reset style button navigateurs*/
display: grid;
width:200px;
max-width:200px;
height: 80px;
background:linear-gradient(to bottom,#fafafa 0%,#e2e2e2 100%);
color:#555;
border-radius: 5px;
box-shadow:inset 0 0 2px #d3d3d3;
}
button >*{grid-area:1/1}
button span{place-self:center;}
button::after {
grid-area:1/1;
content: "";
border-radius: 5px;
box-shadow:
0px 0.4px 0.4px rgba(0, 0, 0, 0.022),
0px 1.1px 1.1px rgba(0, 0, 0, 0.032),
0px 2px 2px rgba(0, 0, 0, 0.04),
0px 3.6px 3.6px rgba(0, 0, 0, 0.048),
0px 6.7px 6.7px rgba(0, 0, 0, 0.058),
0px 16px 16px rgba(0, 0, 0, 0.08);
opacity: 0;
transition: var(--tr);
}
@media (prefers-reduced-motion: no-preference) {
button::after{--tr: opacity .6s;}
}
@media (hover) {
button:hover::after {
opacity: 1;
}
}