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

"use client";

import React from "react";

export interface AnimatedSlideButtonProps {
  primaryText: string;
  hoverText?: string;
  variant?: "primary" | "secondary";
  onClick?: () => void;
  className?: string;
}

export function AnimatedSlideButton({
  primaryText,
  hoverText = "See More →",
  variant = "primary",
  onClick,
  className = "",
}: AnimatedSlideButtonProps) {
  const variantStyles =
    variant === "primary"
      ? "bg-black text-white hover:bg-neutral-800"
      : "bg-white text-black border-2 border-black hover:bg-neutral-100";

  return (
    <button
      type="button"
      onClick={onClick}
      className={`group relative px-8 py-4 rounded-[20px] font-semibold text-sm transition-all duration-300 overflow-hidden cursor-pointer select-none ${variantStyles} ${className}`}
    >
      <div className="flex flex-col items-center justify-center max-h-[22px] overflow-hidden">
        <span className="transition-transform duration-300 ease-in-out transform group-hover:translate-y-[40px] translate-y-2.5">
          {primaryText}
        </span>
        <span className="transition-transform duration-300 ease-in-out transform translate-y-[40px] group-hover:-translate-y-2.5 font-bold">
          {hoverText}
        </span>
      </div>
    </button>
  );
}

export default AnimatedSlideButton;

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.