56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T8e4,

Dotted Arrow Button is an animated Framer component for landing pages, portfolios, pricing sections, and other CTA areas.

Its hover interaction combines staggered letter transitions with swapping arrow circles. The individual arrow dots also pulse in a repeating animation with a three-second pause between cycles.

What Is Included

Default, Hover, and Pressed states
Editable native Framer layers
Eight arrow directions
Separate Start and Hover arrow directions
Animated text transitions
Individual dot-pulse animations

How to Use

Add the button from Assets to your Framer page.
Set the Label and Uppercase options.
Open the main component and select Animated Text to change the font.
Adjust Background and Text Color.
Use Start Background and Start Arrow Color for the initial icon.
Use Hover Background and Hover Arrow Color for the ending icon.
Choose Start Direction and Hover Direction.
Add a Link, enable New Tab, or connect On Click to a Framer action.
Preview the button to test hover, press, text, and dot animations.

Customization

The button uses content-based sizing, so check longer labels in narrow layouts.

You can edit the native layers to change spacing, proportions, and shape. Keep the Animated Text component and dot-animation overrides when copying or modifying the button.

Animation timings are controlled in code and are not exposed as instance controls. Reduced-motion and static-renderer fallbacks are included.

The liquid gradient background and tilted cover styling are presentation artwork only and are not part of the component.

Ideal For

Hero CTAs, portfolio links, project buttons, pricing pages, signup buttons, agency websites, and service enquiry links.

53:[["$","$L56",null,{"post":{"id":"01a10cc0-c057-73ff-a3cd-5a52d24b505f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"r9JWGtFS1tVavzvfZxjZ","resolved":true,"title":"Dotted Arrow Button","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Dotted Arrow Button is an animated Framer component for landing pages, portfolios, pricing sections, and other CTA areas."}]},{"type":"paragraph","content":[{"type":"text","text":"Its hover interaction combines staggered letter transitions with swapping arrow circles. The individual arrow dots also pulse in a repeating animation with a three-second pause between cycles."}]},{"type":"customHeading","content":[{"type":"text","text":"What Is Included"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Default, Hover, and Pressed states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable native Framer layers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Eight arrow directions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate Start and Hover arrow directions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated text transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual dot-pulse animations"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add the button from "},{"type":"text","text":"Assets","marks":[{"type":"bold"}]},{"type":"text","text":" to your Framer page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the "},{"type":"text","text":"Label","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Uppercase","marks":[{"type":"bold"}]},{"type":"text","text":" options."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open the main component and select "},{"type":"text","text":"Animated Text","marks":[{"type":"bold"}]},{"type":"text","text":" to change the font."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust "},{"type":"text","text":"Background","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Text Color","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use "},{"type":"text","text":"Start Background","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Start Arrow Color","marks":[{"type":"bold"}]},{"type":"text","text":" for the initial icon."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use "},{"type":"text","text":"Hover Background","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Hover Arrow Color","marks":[{"type":"bold"}]},{"type":"text","text":" for the ending icon."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose "},{"type":"text","text":"Start Direction","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Hover Direction","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a "},{"type":"text","text":"Link","marks":[{"type":"bold"}]},{"type":"text","text":", enable "},{"type":"text","text":"New Tab","marks":[{"type":"bold"}]},{"type":"text","text":", or connect "},{"type":"text","text":"On Click","marks":[{"type":"bold"}]},{"type":"text","text":" to a Framer action."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview the button to test hover, press, text, and dot animations."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Customization"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"The button uses content-based sizing, so check longer labels in narrow layouts."}]},{"type":"paragraph","content":[{"type":"text","text":"You can edit the native layers to change spacing, proportions, and shape. Keep the "},{"type":"text","text":"Animated Text","marks":[{"type":"bold"}]},{"type":"text","text":" component and dot-animation overrides when copying or modifying the button."}]},{"type":"paragraph","content":[{"type":"text","text":"Animation timings are controlled in code and are not exposed as instance controls. Reduced-motion and static-renderer fallbacks are included."}]},{"type":"paragraph","content":[{"type":"text","text":"The liquid gradient background and tilted cover styling are presentation artwork only and are not part of the component."}]},{"type":"customHeading","content":[{"type":"text","text":"Ideal For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Hero CTAs, portfolio links, project buttons, pricing pages, signup buttons, agency websites, and service enquiry links."}]}]},"introduction":"Animated CTA with dotted arrows","slug":"dotted-arrow-button","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0377da32-5157-43ad-9c57-e949e915db9e/01a10cc0-a369-75dd-8a29-5a3bc7d85bcc.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-10-05T15:48:40.587Z","updatedAt":"2026-10-05T16:17:19.014Z","publishedAt":"2026-10-05T15:48:40.583Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Dotted-Arrow-Button-e4Hpn8.js@5zr0V9X1gFoc9cq0MHki","previewUrl":"https://dotted-arrow-button.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"5zr0V9X1gFoc9cq0MHki","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T15:48:41.175Z","updatedAt":"2026-10-05T15:48:41.175Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you