Flipflop Button

Flip button with an elastic snap

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.

Flip button with an elastic snap