HTML + CSSButtons
Rolling text button
On hover, the label slides up out of view and a second message rolls in from below.
Settings
16px
1x
Code
<button class="uv-roll"><span data-t="Let’s go!">Hello</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
Where to use it
A rolling text button lets you say two things in the same space. “Menu” can turn into “See what's cooking” on a restaurant site, “Contact” into “Say hello” on a freelance portfolio, or “Choose plan” into “Let's go” on a pricing table. The swap has a small bounce that makes it feel friendly.
Keep both labels close in length, otherwise the button looks empty or cramped halfway through. The second text should add something new, a tone or a promise. If it only repeats the first one, a simpler hover will do the job just as well.