Tailwind UI Pattern Registry for humans and agents

button hover slide gradient background elastic cta CTA button hover effect navigation button interaction form submit button enhancement background-color transitions look flat need directional background reveal on hover want smooth sliding color change with elastic feel

Button Background Slide

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

Quick Start

<button class="button-bg-slide px-6 py-3 text-white rounded-lg">Click me</button>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
755 bytes · 28 lines
Custom Properties
--btn-base--btn-hover--btn-speed
Classes
.button-bg-slide
button hover slide gradient background elastic cta

A 200%-wide gradient shifts its background-position on hover, creating a smooth directional color slide. The cubic-bezier(0.62, 0.83, 0.34, 0.93) easing gives a subtle elastic bounce.

CTA button

<button class="button-bg-slide rounded-xl px-6 py-3 text-sm font-semibold text-white">
  Get Started
</button>

Custom colors

<button class="button-bg-slide rounded-xl px-6 py-3 text-white"
        style="--btn-base: oklch(0.45 0.15 150); --btn-hover: oklch(0.35 0.2 150)">
  Go Green
</button>