Reticle Button

Full Description Reticle Button is a subtle, precision-styled button with an animated targeting frame that draws itself in on hover — dashed guide lines extend from each edge,…

Full Description Reticle Button is a subtle, precision-styled button with an animated targeting frame that draws itself in on hover — dashed guide lines extend from each edge, corner marker dots snap outward like a camera focus reticle, and a faint grid pattern fades in behind the label. Built entirely with CSS transitions, so it's smooth and lightweight with zero JavaScript animation loop, and follows Framer's static-rendering guidelines (fully static on Canvas and in exports, animated only in live Preview and the published site). Fully customizable from the properties panel, no code editing required: Text Color & Hover Text Color Background & Hover Background Dot Color & Dot Size Line Color & Line Width Border / Grid Color & Border Width Typography — font family, weight, and size via Framer's native font picker Icon Image — upload your own icon, or use the built-in default, with adjustable size and gap Padding — size the button by adjusting padding, so it hugs its content Frame Gap — space the corner marks and lines sit in around the button Animation Speed Link — with optional new-tab behavior A great fit for tech, SaaS, portfolio, or product sites looking for a precise, engineered feel rather than a soft, rounded CTA. Key Features Pure CSS hover animation, no JS render loop Static-safe: fully disables animation on Canvas/export per Framer guidelines Corner dots + dashed frame lines animate in on hover Subtle diagonal grid-pattern reveal behind the label Fully themeable: colors, thickness, and spacing for every accent Custom icon upload with size/gap controls Auto-sizing via padding (hug-content behavior) Works as a button or a link (with new-tab option)

Animated reticle-frame hover butto