Letter Flip Button

Letters that flip on hover.

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.

Letters that flip on hover.