---
title: "Letter Flip Button — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Karl Bier · Buttons. Letters that flip on hover."
canonical: "https://framer.elliotli.dev/component/letter-flip-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Letter Flip Button

# Letter Flip Button

Letters that flip on hover.

[View on Framer](https://framer.com/marketplace/components/letter-flip-button/?via=elliot-li)

![Letter Flip Button preview image 1](https://framer.elliotli.dev/og/component/letter-flip-button/d3223a435407a2a5/1600x1200.jpg)

## Summary

Letters that flip on hover.

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3933

## Details

- **Author**: Karl Bier
- **Price**: $4.00
- **Published**: 2026-06-23
- **Updated**: 2026-06-23
- **Added**: 2026-06-23
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything