Custom Draw Fill Button is a sleek, highly customizable interactive CTA component for Framer. Built with fluid scale-transform overlays and smooth SVG icon rotations, it delivers a modern reveal effect on hover—perfect for landing pages, modern marketing sites, and portfolio hero sections.
Top-Left Draw Fill Reveal: Triggers a smooth circular fill transition originating from the top-left corner on hover for both the main button pill and the optional icon badge.
Animated Arrow Badge: Features a rotating arrow icon (0° to -45° on hover) housed inside a circular container with spring-like bezier easing.
Flexible Layout Options: Toggles seamlessly between standard layout, reversed orientation (flipping text and icon order), or full-width flex alignment.
Accessible & SSR Safe: Built-in useIsStaticRenderer check prevents broken thumbnail previews in Framer Canvas/Marketplace while providing explicit ARIA states, focus outlines, and full keyboard interaction support.
All aspects are exposed via Framer’s Property Panel:
Text & Links: Set custom label text, attach links, toggle external navigation, and manage disabled states.
Typography: Full font selection controls (family, weight, style) along with adjustable font size.
Colors & Theme: Independent color controls for default vs. hover states across button background, text, icon background, icon stroke, and borders.
Made with 💛 by @Karim Saif
Custom Draw Fill Button is a sleek, highly customizable interactive CTA component for Framer. Built with fluid scale-transform overlays and smooth SVG icon rotations, it delivers a modern reveal effect on hover—perfect for landing pages, modern marketing sites, and portfolio hero sections.
Top-Left Draw Fill Reveal: Triggers a smooth circular fill transition originating from the top-left corner on hover for both the main button pill and the optional icon badge.
Animated Arrow Badge: Features a rotating arrow icon (0° to -45° on hover) housed inside a circular container with spring-like bezier easing.
Flexible Layout Options: Toggles seamlessly between standard layout, reversed orientation (flipping text and icon order), or full-width flex alignment.
Accessible & SSR Safe: Built-in useIsStaticRenderer check prevents broken thumbnail previews in Framer Canvas/Marketplace while providing explicit ARIA states, focus outlines, and full keyboard interaction support.
All aspects are exposed via Framer’s Property Panel:
Text & Links: Set custom label text, attach links, toggle external navigation, and manage disabled states.
Typography: Full font selection controls (family, weight, style) along with adjustable font size.
Colors & Theme: Independent color controls for default vs. hover states across button background, text, icon background, icon stroke, and borders.
Made with 💛 by @Karim Saif
