---
title: "Reticle Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Nazam Azam · Buttons. Full Description Reticle Button is a subtle, precision-styled button with an animated targeting frame that draws itself in on hover — dashed…"
canonical: "https://framer.elliotli.dev/component/reticle-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Reticle Button

# Reticle Button

Animated reticle-frame hover butto

[View on Framer](https://framer.com/marketplace/components/reticle-button/?via=elliot-li)

![Reticle Button preview image 1](https://framer.elliotli.dev/og/component/reticle-button/4e79ebb957815d16/1600x1200.jpg)

## Summary

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

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #4061

## Details

- **Author**: Nazam Azam
- **Published**: 2026-07-08
- **Updated**: 2026-07-08
- **Added**: 2026-07-08
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything