Letter Flip Button

Button 001 — Letters that flip on hover

A pill-shaped button for Framer where every character animates independently. Hover it, and each letter rotates out in 3D while a second layer of letters flips in to take its place — timed to ripple outward from the center, so it reads as one fluid motion instead of a uniform swap.

This is a code component, not an image trick — drop it into any Framer project and it just works.

What you get

• One component, ready to paste into Framer

• Full property controls — no code editing required to customize

• Works as a button or a link (toggle by adding a URL)

Customize without touching code

• Label text and full font controls (family, weight, size, spacing, line height)

• Text and background color

• Padding (X / Y) and corner radius — from sharp edges to a full pill

• Stagger — control how much delay ripples between letters

• Duration — control how fast or slow each letter flips

• Optional link field — automatically renders as an anchor tag when filled, a button when empty

Built properly, not just prettily

• Keyboard accessible — focus triggers the same animation as hover

• aria-label included automatically so screen readers read the real label, not split characters

• Detects Framer's static export mode so it won't animate (or break) in thumbnails and static builds

• Lightweight — Framer Motion only, no extra dependencies

Good for Hero CTAs, nav buttons, portfolio sites, agency landing pages — anywhere a default hover state feels like an afterthought.