Tailwind UI Pattern Registry for humans and agents

button slide text hover replace overflow cta premium CTA button with premium hover feedback hero button with sliding text effect navigation button with micro-interaction pricing button with engagement hook flat button hover feels too static need text-swap effect on buttons without JS want slot-machine style button interaction

Button Text Slide

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/button-text-slide.json
Format
Preview
Stage Background
Customize

Quick Start

<button class="button-text-slide px-6 py-3 bg-indigo-600 text-white rounded-full"><span class="button-text-slide-label">Get Started</span><span class="button-text-slide-hover" aria-hidden="true">Get Started</span></button>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
885 bytes · 43 lines
Custom Properties
--slide-speed
Classes
.button-text-slide.button-text-slide-label.button-text-slide-hover
button slide text hover replace overflow cta premium

The visible label slides up and out of the button (translateY(-100%)), while a hidden duplicate slides in from below (translateY(100% → 0)). Uses overflow: hidden on the button to clip both states. The duplicate carries aria-hidden="true" since it’s purely visual.

Primary CTA

<button class="button-text-slide rounded-full bg-indigo-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-indigo-700">
  <span class="button-text-slide-label">Get Started</span>
  <span class="button-text-slide-hover" aria-hidden="true">Get Started</span>
</button>

Ghost button with same text

<button class="button-text-slide rounded-full border border-white/40 px-6 py-3 font-medium text-white transition-colors hover:border-white hover:bg-white hover:text-black">
  <span class="button-text-slide-label">Learn more</span>
  <span class="button-text-slide-hover" aria-hidden="true">Learn more</span>
</button>

Different text on hover

<a href="#pricing" class="button-text-slide inline-flex rounded-full bg-emerald-600 px-8 py-3 font-semibold text-white hover:bg-emerald-700">
  <span class="button-text-slide-label">See pricing</span>
  <span class="button-text-slide-hover" aria-hidden="true">From $9/mo</span>
</a>