Buttons
Button Glow on Hover
A coloured halo that grows on hover, for primary calls to action.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.button-glow {
transform: translate3d(156px, 135px, 0);
width: 168px;
height: 50px;
background: #8b5cf6;
border-radius: 14px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
transition: box-shadow 260ms ease-out;
}
.button-glow:hover {
box-shadow: 0px 0px 30px 2px #8b5cf6aa;
}
@media (prefers-reduced-motion: reduce) {
.button-glow {
animation: none;
transition: none;
}
}Why it is built this way
The glow is a box-shadow whose blur and spread animate from zero. Shadows are not compositor properties, so keep this to one or two elements on a page rather than a grid of them.
What it animates
No keyframes at all — this one is built from interaction states, so the browser only does anything when the visitor does.
What it costs to run
Nothing here runs on a timer. The motion lives entirely in :hover, which compiles to a transition — so it costs nothing until the visitor does something, and it interrupts and reverses cleanly halfway through.
Accessibility
A reader who never triggers :hover never sees this, so it carries no risk on load. Worth adding a :focus-visible state alongside it: as written, a keyboard user gets no feedback at all.