---
title: "Draw Path Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Draw Path Button is a bold CTA button with a signature interaction an SVG path that draws itself around the button on hover,…"
canonical: "https://framer.elliotli.dev/component/draw-path-button"
---

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

# Draw Path Button

A CTA button with an SVG path

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

![Draw Path Button preview image 1](https://framer.elliotli.dev/og/component/draw-path-button/ba3f0275fa951801/1600x1200.jpg)

## Summary

About Draw Path Button is a bold CTA button with a signature interaction an SVG path that draws itself around the button on hover, giving it a handcrafted, expressive feel.

## Description

**About**

Draw Path Button is a bold CTA button with a signature interaction an SVG path that draws itself around the button on hover, giving it a handcrafted, expressive feel. It works well anywhere you want the action to feel more alive and intentional.

**What it does**

On hover, an SVG stroke animates along the edge of the button in a draw-on motion, like someone tracing it by hand. The path sits outside the button bounds and draws in smoothly, making the interaction feel tactile and distinct from a standard hover effect.

**What you can customize**

Full control from the Framer panel: button text, link, open in new tab, background color, text color, border radius, path color, font, and padding. No code needed.

Great for (examples)

Use it anywhere you want a hover interaction that actually gets noticed:

_→ hero section CTAs_

_→ portfolio and creative studio_

_→ sites editorial and editorial landing pages_

_→ product and SaaS websites_

_→ waitlist and signup buttons_

_→ pricing section actions_

_→ Framer template previews_

_→ personal brand websites_

**Share your build**

If you ship something cool with it, post it on X and tag me [@karimsaif0](https://karimsaif0), or send it over. I would love to see what you create.

**Need help?**

Questions or feedback? Reach me anytime: [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://karimsaif0)

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

-   All · #6540

## Details

- **Author**: Karim Saif
- **Published**: 2026-06-25
- **Updated**: 2026-06-25
- **Added**: 2026-06-25
- **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