←
Animated Slide-Up Button

Animated Slide-Up Button

Micro-Interaction

Dual-text roll CTA button that smoothly translates labels vertically on hover with overflow clipping. Optimized for high-conversion service cards.

Interactive Playground & Studio

Live Controls
animated-slide-button.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Primary Obsidianvariant="primary"

Solid high-contrast obsidian button with seamless vertical text roll on hover.

Secondary Outlinevariant="secondary"

Clean bordered ghost button with inverse slide-up text reveal effect.

Features & Physics

✓Dual text vertical roll on hover
✓Smooth translateY with overflow clip
✓Primary & secondary styles
✓Zero layout shift

Code & Integration

Customized live with your active playground prop settings:

import { AnimatedButton } from "@/components/AnimatedButton";

export default function Example() {
  return (
    <AnimatedButton
      primaryText="Explore Services"
      hoverText="See More →"
      variant="primary"
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
primaryTextstring—Label shown in the resting state.
hoverTextstring"See More"Label rolled in on hover.
variant"primary" | "secondary""primary"Colour style of the pill.