Button Text Effect Slide Up 1 - Slide up primary

Pro

Primary slide up button with hover text swap.
Shadcn Button Text Effect Slide Up 1 component

Component Data

  • ID:button/button-text-effect-slide-up-1
  • Access:pro
  • Created:May 23, 2026
  • Type:example

Button Text Effect Slide Up 1 component design & features

Text slides upward on hover, rolling the default label out and bringing a second word up from below. Grid stacking keeps the button width stable when the two phrases differ in length.

Use for CTAs where vertical motion signals interactivity without changing button width.