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)
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)
