React Flip Button

React flip button with 3D animations that reveal hidden messages on hover. Smooth transitions and customizable directions with TypeScript and shadcn/ui.

React

Framer Motion

Creating interactive button animations?

Join our Discord community for help from other developers.

Remember those business cards that flip to reveal contact details? That satisfying rotation that makes you want to hover again? Most button hover effects are boring—color changes, slight scales, maybe a shadow. This React component gives you smooth 3D flips that reveal entirely different content, making every interaction feel premium.

3D flip on hover

Hover to reveal hidden messages with buttery smooth perspective transforms:

Loading component...

'use client';import * as React from 'react';import {  type HTMLMotionProps,  type Transition,  type Variant,  motion,} from 'motion/react';import { cn } from '@/lib/utils';type FlipDirection = 'top' | 'bottom' | 'left' | 'right';type FlipButtonProps = HTMLMotionProps<'button'> & {  frontText: string;  backText: string;  transition?: Transition;  frontClassName?: string;  backClassName?: string;  from?: FlipDirection;};const DEFAULT_SPAN_CLASS_NAME =  'absolute inset-0 flex items-center justify-center rounded-lg';function FlipButton({  frontText,  backText,  transition = { type: 'spring', stiffness: 280, damping: 20 },  className,  frontClassName,  backClassName,  from = 'top',  ...props}: FlipButtonProps) {  const isVertical = from === 'top' || from === 'bottom';  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';  const frontOffset = from === 'top' || from === 'left' ? '50%' : '-50%';  const backOffset = from === 'top' || from === 'left' ? '-50%' : '50%';  const buildVariant = (    opacity: number,    rotation: number,    offset: string | null = null,  ): Variant => ({    opacity,    [rotateAxis]: rotation,    ...(isVertical && offset !== null ? { y: offset } : {}),    ...(!isVertical && offset !== null ? { x: offset } : {}),  });  const frontVariants = {    initial: buildVariant(1, 0, '0%'),    hover: buildVariant(0, 90, frontOffset),  };  const backVariants = {    initial: buildVariant(0, 90, backOffset),    hover: buildVariant(1, 0, '0%'),  };  return (    <motion.button      data-slot="flip-button"      initial="initial"      whileHover="hover"      whileTap={{ scale: 0.95 }}      className={cn(        'relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none',        className,      )}      {...props}    >      <motion.span        data-slot="flip-button-front"        variants={frontVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-muted text-black dark:text-white',          frontClassName,        )}      >        {frontText}      </motion.span>      <motion.span        data-slot="flip-button-back"        variants={backVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-primary text-primary-foreground',          backClassName,        )}      >        {backText}      </motion.span>      <span className="invisible">{frontText}</span>    </motion.button>  );}export { FlipButton, type FlipButtonProps, type FlipDirection };

Built for React applications with TypeScript and Next.js. Uses Framer Motion for physics-based spring animations that feel natural, not mechanical. The 3D perspective runs on the GPU, keeping your JavaScript thread free. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

npx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

Usage

import { FlipButton } from "@/components/ui/flip-button";

export default function CTASection() {
  return (
    <div className="flex gap-4">
      <FlipButton
        frontText="Get Started"
        backText="Let's Go! 🚀"
        from="top"
      />
      <FlipButton
        frontText="Learn More"
        backText="Discover →"
        from="left"
        frontClassName="bg-secondary"
        backClassName="bg-primary"
      />
    </div>
  );
}

Why most hover effects suck

Developers love their hover:scale-105 and call it interactive. Or they add a color change that's barely noticeable. The problem? Users are numb to these micro-interactions. They don't create delight or engagement anymore.

3D flips are different. They reveal information, create anticipation, and feel intentional. This React component handles the complex parts: perspective math, backface visibility, state management, and spring physics. You just provide the text and it handles the rest.

Plus, it's not just about the flip—it's about the physics. The spring animation feels natural because it uses real physics calculations, not linear transitions that feel robotic.

Examples

Flip Directions

Four directions for different visual personalities—each creates unique spatial movement:

Loading component...

'use client';import * as React from 'react';import {  type HTMLMotionProps,  type Transition,  type Variant,  motion,} from 'motion/react';import { cn } from '@/lib/utils';type FlipDirection = 'top' | 'bottom' | 'left' | 'right';type FlipButtonProps = HTMLMotionProps<'button'> & {  frontText: string;  backText: string;  transition?: Transition;  frontClassName?: string;  backClassName?: string;  from?: FlipDirection;};const DEFAULT_SPAN_CLASS_NAME =  'absolute inset-0 flex items-center justify-center rounded-lg';function FlipButton({  frontText,  backText,  transition = { type: 'spring', stiffness: 280, damping: 20 },  className,  frontClassName,  backClassName,  from = 'top',  ...props}: FlipButtonProps) {  const isVertical = from === 'top' || from === 'bottom';  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';  const frontOffset = from === 'top' || from === 'left' ? '50%' : '-50%';  const backOffset = from === 'top' || from === 'left' ? '-50%' : '50%';  const buildVariant = (    opacity: number,    rotation: number,    offset: string | null = null,  ): Variant => ({    opacity,    [rotateAxis]: rotation,    ...(isVertical && offset !== null ? { y: offset } : {}),    ...(!isVertical && offset !== null ? { x: offset } : {}),  });  const frontVariants = {    initial: buildVariant(1, 0, '0%'),    hover: buildVariant(0, 90, frontOffset),  };  const backVariants = {    initial: buildVariant(0, 90, backOffset),    hover: buildVariant(1, 0, '0%'),  };  return (    <motion.button      data-slot="flip-button"      initial="initial"      whileHover="hover"      whileTap={{ scale: 0.95 }}      className={cn(        'relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none',        className,      )}      {...props}    >      <motion.span        data-slot="flip-button-front"        variants={frontVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-muted text-black dark:text-white',          frontClassName,        )}      >        {frontText}      </motion.span>      <motion.span        data-slot="flip-button-back"        variants={backVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-primary text-primary-foreground',          backClassName,        )}      >        {backText}      </motion.span>      <span className="invisible">{frontText}</span>    </motion.button>  );}export { FlipButton, type FlipButtonProps, type FlipDirection };

Features

Smooth 3D flip animations with real physics-based spring transitions that feel natural
Four flip directions (top, bottom, left, right) for different interaction patterns
Customizable face styling with separate classes for front and back appearances
GPU-accelerated transforms using CSS 3D perspective for buttery smooth 60fps
TypeScript definitions with complete prop types and direction enums
Automatic dimension preservation maintaining consistent button size during flips
Framer Motion springs providing natural acceleration and deceleration curves
Accessible hover states with proper focus management and keyboard support

API Reference

FlipButton

The main component for 3D flip button interactions with customizable content.

Prop	Type	Default	Description
`frontText`	`string`	required	Text displayed on the front face
`backText`	`string`	required	Text revealed on the back face during hover
`from`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Direction of the flip animation
`transition`	`Transition`	`{ type: "spring", stiffness: 280, damping: 20 }`	Framer Motion transition configuration
`frontClassName`	`string`	-	CSS classes for front face styling
`backClassName`	`string`	-	CSS classes for back face styling
`className`	`string`	-	CSS classes for the button container
`...props`	`HTMLMotionProps`	-	All Framer Motion button props supported

Direction Behaviors

Each direction creates distinct spatial movement:

Direction	Axis	Visual Effect	Use Case
`top`	X-axis	Flips upward like a card	Revealing upgrades, positive actions
`bottom`	X-axis	Flips downward	Showing details, expanding information
`left`	Y-axis	Rotates left like a door	Navigation, going back
`right`	Y-axis	Rotates right	Forward progress, next steps

Spring Physics

The default spring configuration provides natural movement:

// Snappy, responsive feel (default)
transition={{ type: "spring", stiffness: 280, damping: 20 }}

// Smooth, elegant motion
transition={{ type: "spring", stiffness: 200, damping: 25 }}

// Bouncy, playful interaction
transition={{ type: "spring", stiffness: 400, damping: 15 }}

// Quick, minimal movement
transition={{ type: "spring", stiffness: 500, damping: 30 }}

Common gotchas

Text length mismatches: If your front and back text have very different lengths, the button might resize during flip. The component handles this with an invisible text layer, but extreme differences can still cause layout shift.

Mobile hover behavior: On touch devices, the flip triggers on tap and stays flipped until another tap. This is standard mobile behavior but might surprise users expecting desktop-like hover.

Perspective container issues: The 3D perspective requires a container with defined dimensions. If your button appears flat, check that parent elements have proper height/width.

Z-index stacking: During flip, the button temporarily extends in 3D space. Elements with high z-index nearby might clip the animation. Give the button container adequate spacing.

Custom spring values: Very low damping (less than 10) creates excessive bounce that looks unnatural. Very high stiffness (greater than 600) makes the animation too quick to perceive.

Explore other interactive button components for React applications:

React Flip Button

3D flip on hover

Installation

Usage

Why most hover effects suck

Examples

Flip Directions

Features

API Reference

FlipButton

Direction Behaviors

Spring Physics

Common gotchas

You might also like

Ripple Button

Liquid Button

Copy Button

GitHub Stars Button

Questions developers actually ask

On this page

React Flip Button