buttonanimated-hoverintermediate

Animated Button Hover

A button with a sliding background reveal animation on hover using pseudo-elements.

Preview

<button class="relative px-8 py-3 bg-teal-600 text-white font-semibold rounded-lg overflow-hidden group">
  <span class="absolute inset-0 bg-teal-800 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></span>
  <span class="relative">Hover Me</span>
</button>

Color Breakdown

Base Background

bg-teal-600

#0d9488

Hover Overlay

bg-teal-800

#115e59

Text

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-teal-700 dark:group-hover:bg-teal-900

Use Cases

Creative portfoliosInteractive landing pagesMarketing sites

Browser Support

All modern browsers. CSS transforms supported in all evergreen browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Can I change the slide direction?▼

Yes, replace translate-y-full with translate-x-full for a horizontal slide, or -translate-y-full for top-to-bottom.