Swap Text
No library Beginner
The button label slides upward out of frame on hover while a secondary label slides in from below — a clean way to surface a call-to-action hint. Pure CSS transitions, no dependencies.
The button label slides upward out of frame on hover while a secondary label slides in from below — a clean way to surface a call-to-action hint. Pure CSS transitions, no dependencies.
Goal: Create a "Swap Text" button animation.
Visual behavior: The button shows a primary label ("Get Started"). On hover, that label slides upward out of the button (translateY -130%) while a secondary label ("Let's Go →") slides in from below (translateY 130% → 0). Both transitions are simultaneous at ~280ms. The button background is a vivid indigo-to-violet gradient. On mouse-leave the labels return to their original positions.
Technique: position: relative + overflow: hidden on the button. The primary label is a block span that translates on hover. The secondary label is positioned absolute with inset 0, flexed to center, and slides in from translateY(130%). React useState tracks hover. Transition uses cubic-bezier(0.4, 0, 0.2, 1).
Accessibility: Text transitions removed under prefers-reduced-motion; both labels remain visible statically. 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.