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