---
title: "Dashed Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Andrej Gaewski · Buttons. Animated Dashed Border"
canonical: "https://framer.elliotli.dev/component/dashed-button"
---

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

# Dashed Button

Animated Dashed Border

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

![Dashed Button preview image 1](https://framer.elliotli.dev/og/component/dashed-button/af6552d5f90532ab/1600x1200.jpg)

## Summary

Animated Dashed Border

## Description

Give your primary actions a distinct, animated outline—subtle at rest, vivid on hover. This button ships with granular controls so you can match any brand or layout in seconds.

-   **Content & typography:** set the label text and choose any font. Optional icon (show/hide) for leading/trailing emphasis.
    
-   **Colors & theming:** independent controls for **Text Color**, **Background**, **Hover Background**, **Border Color**, and **Hover Border** to keep the outline readable in light or dark UIs.
    
-   **Border system:** tune **Border Width** and **Border Radius** (from sharp to fully pill-shaped).
    
-   **Dash pattern:** define **Dash Length** and **Gap Length** to control the rhythm of the dashed outline.
    
-   **Animation behavior:** adjust **Animation Speed** for the dash motion; switch **Solid on Hover** to convert the dashed outline into a solid ring on interaction.
    
-   **Layout control:** per-side padding (**Top/Right/Bottom/Left**) for pixel-perfect sizing and icon/label balance.
    
-   **Motion feel:** choose **Transition: Spring** for a snappy, natural response on hover/press.
    

Perfect for hero CTAs, pricing tiers, feature cards, and promo banners where you want a tasteful, motion-driven accent without heavy visuals.

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

-   All · #7209

## Details

- **Author**: Andrej Gaewski
- **Published**: 2026-01-27
- **Updated**: 2026-01-27
- **Added**: 2025-11-09
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow