Shine/gloss sweep
The pill CTA has a semi-transparent diagonal stripe in ::after that slides across on a loop, reading like a specular sweep on glass.
Upgrade plan
Widely Supported
Quick implementation
@keyframes shinegloss-sweep-move {
0% { transform: translateX(-120%) skewX(-18deg); }
100% { transform: translateX(220%) skewX(-18deg); }
}
.shinegloss-sweep-card {
position: relative; overflow: hidden;
}
.shinegloss-sweep-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 35%, #fff7 50%, transparent 65%);
width: 45%;
animation: shinegloss-sweep-move 2.8s ease-in-out infinite;
}Prompt this to your LLM
CTAs and feature rows.
You are adding a repeating “shine” highlight on a pill button.
Goal: ::after with a narrow light band (linear-gradient), skewed, translated from off-left to off-right in a loop.
Constraints:
- Parent has overflow:hidden and border-radius.
- prefers-reduced-motion: hide the sweep.
Return CSS.Why this matters in 2026
Micro-motion on primary actions increases perceived affordance when used sparingly; the gloss read is familiar from native and game UIs.
The logic
Animating transform on the pseudo-element keeps work off the layout thread; the band stays a single composited layer.
Accessibility & performance
Disable the loop under reduced motion; avoid pairing with flashing intervals near seizure thresholds.