Button 3D Flip

A modern 3D flip button for Framer that reveals alternate text on hover. Used for nav links, CTAs, and interactive UI elements.

Key Features:

• Smooth 3D flip animation

• Front & back text states (same text by default)

• Fully customizable fonts (family, size, weight, uppercase)

• Customizable colors, padding, and border radius

• Lightweight and performance-friendly (pure CSS transform)

How to Use:

1. Copy the component onto your canvas

2. Enter your button text (e.g. JOIN NOW)

3. (Optional) Add a flip text label

   • Leave blank to reuse the main text

4. Set your link URL

5. Customize styling:

   • Font & weight

   • Font size

   • Text transform (uppercase toggle)

   • Background & text colors

   • Flip background & text colors

   • Padding & border radius

6. Preview / hover to see the 3D flip effect