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 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.
Vlad Bratash
