A skewed diagonal glare band slides across the button from left to right on hover. The glare is a semi-transparent white gradient on an absolutely-positioned span. The transition is one-shot on mouseenter (no reverse on mouseleave), giving a clean premium feel. No dependencies.
Goal: Create a "Shimmer Sweep" button animation.
Visual behavior: On hover, a bright diagonal glare streak sweeps across the button from left to right — like light catching a polished surface. It only fires on mouseenter, not in reverse on mouseleave, so it feels like a one-shot flash. The glare is semi-transparent white, skewed ~15 degrees, and moves across in ~520ms.
Technique: An absolutely-positioned span covers the left half of the button. Its background is a linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%) creating the glare band. transform uses translateX + skewX(-15deg) — at rest: translateX(-120%), on hover: translateX(260%). Transition is applied only on mouseenter (transition: 'transform 520ms ease') and set to 'none' on mouseleave so it resets instantly. Use React useState for the hovered state. Button uses overflow: hidden to clip the span.
Accessibility: Under prefers-reduced-motion, set transition to none and keep translateX at the default hidden position.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.