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 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>