---
title: "Flipflop Button — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Vlad Bratash · Buttons. Flip button with an elastic snap"
canonical: "https://framer.elliotli.dev/component/flipflop-button"
---

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

# Flipflop Button

Flip button with an elastic snap

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

![Flipflop Button preview image 1](https://framer.elliotli.dev/og/component/flipflop-button/6687793462149819/1600x913.jpg)

## Summary

Flip button with an elastic snap

## Description

**Flip Button is a premium,** fully configurable CTA component built around a satisfying motion: on hover the resting face collapses into its own top edge while a second face grows up from the bottom with a subtle elastic overshoot. On click it adds a gentle spring-back press, so every interaction feels physical.

Everything is editable from the property panel — you control both the idle and hover states independently, so the button can transform color, text color, border and corner radius mid-animation.

**Built for flexibility — every detail is a control:**

-   **Two fully independent states** — separate background, text, border and corner radius for idle and hover, so the button can fully change appearance on hover.
    
-   **Motion controls** — single Anim Speed slider (0.3×–2.5×) retimes the whole animation, including the elastic spring and press feedback.
    
-   **Optional hover scale** — toggle a subtle grow-on-hover with adjustable amount.
    
-   **Press feedback** — built-in spring-back scale on click for a tactile button feel.
    
-   **Icon support** — built-in arrow or your own custom SVG / component; control color (idle + hover), thickness, size, side (left/right) and gap. Icons inherit the state colors automatically.
    
-   **Layout** — uniform padding or per-side padding, plus independent idle and hover corner radius.
    
-   **Shadow** — optional drop shadow with full color, X/Y offset, blur and spread; follows the active face.
    
-   **Typography** — full Framer font control (family, size, weight, letter spacing).
    
-   **Link ready** — wire it to any page or URL.
    
-   Responsive, auto-sizing, transform-based (GPU-friendly, no heavy dependencies).
    

**How it works:** hover triggers a two-part transform — the front face scales to zero from its top edge while the back face scales up from its bottom edge — producing the signature "flip/spring" reveal. Adjust _Anim Speed_ to taste.

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

-   All · #9206

## Details

- **Author**: Vlad Bratash
- **Price**: $4.00
- **Published**: 2026-06-29
- **Updated**: 2026-10-29
- **Added**: 2026-06-29
- **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