Flipflop Button

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.