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.
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.
Karl Bier
