Slide Fill
No library Beginner
An indigo-to-violet gradient slides in from the left to fill the button on hover, then retreats on mouse-leave. Pure CSS transitions, no dependencies.
An indigo-to-violet gradient slides in from the left to fill the button on hover, then retreats on mouse-leave. Pure CSS transitions, no dependencies.
Goal: Create a "Slide Fill" button animation.
Visual behavior: Button starts transparent with a subtle white border. On hover, an indigo-to-violet gradient (linear-gradient 90deg) slides in from the left, filling the button over ~320ms. On mouse-leave it retreats back to the left. The text remains white and always visible above the fill.
Technique: position: relative on the button, overflow: hidden. An absolutely-inset span holds the gradient background. On hover: translateX(-100%) → translateX(0); on leave: reverse. The text label is wrapped in a relative z-index span to sit above the fill. Transition uses cubic-bezier(0.4, 0, 0.2, 1).
Accessibility: Transition removed under prefers-reduced-motion. Focus ring preserved.
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.