Throw Button

Animated Arrow Badge

About 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. What it does 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. What you can customize 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. Connect Made with 💛 by @Karim Saif

Animated Arrow Badge