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:T99a,

Sometimes, the smallest details make the biggest difference.

Meet Dot Button — A minimal, modern button component for Framer featuring a simple dot mask that adds personality to your website without overwhelming your design.

With its clean pill-shaped design, balanced typography, and contrasting colors, Dot Button is perfect for modern websites that value simplicity and thoughtful details. Use it for calls to action, navigation links, hero sections, landing pages, portfolios, creative studios, and more.

What makes it different?

Most buttons rely on elaborate animations or decorative elements to stand out. Dot Button keeps things simple with a small dot that complements the label and gives the button a distinctive visual identity.

Choose between Light and Dark button styles to suit your design. Whether you're building a minimal portfolio, a premium agency website, or a modern SaaS landing page, Dot Button fits right in.

Instructions

Copy and paste Dot Button into your Framer project.
Add your button text.
Choose the Light or Dark variant to match your design.
Customize the component to fit your layout and visual style.
Connect your link or interaction and publish.

Features

Minimal Design: Clean pill-shaped buttons with a distinctive dot detail.
Light & Dark Variants: Choose between contrasting button styles.
Modern Typography: Clear, readable text for a polished appearance.
Versatile Use: Ideal for CTAs, navigation, hero sections, and landing pages.
Easy to Use: Copy, customize, and add to your Framer project.
Design-Friendly: A simple visual style that works across different website aesthetics.
Ready to Use: Get started without building the button from scratch.

Add a small detail that makes your buttons stand out.

Made by Zelo Studio 💙

53:[["$","$L56",null,{"post":{"id":"01a15073-aeb0-74eb-a4d6-af229500c8bb","title":null,"body":"

Meet Dot Button 🔥

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Meet Dot Button "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}}]}]},"author":{"framerUserId":"f27b8cab-248a-4dbe-ab35-8dd9ad4a81bf","name":"Zelo Studio","slug":"zelo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f27b8cab-248a-4dbe-ab35-8dd9ad4a81bf/s1mq6yg7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7FBbNNL0RwuHZvqKsMtj","resolved":true,"title":"Dot Button","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Explore more components here →","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/pyczDRm","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Sometimes, the smallest details make the biggest difference."}]},{"type":"paragraph","content":[{"type":"text","text":"Meet Dot Button — A minimal, modern button component for Framer featuring a simple dot mask that adds personality to your website without overwhelming your design."}]},{"type":"paragraph","content":[{"type":"text","text":"With its clean pill-shaped design, balanced typography, and contrasting colors, Dot Button is perfect for modern websites that value simplicity and thoughtful details. Use it for calls to action, navigation links, hero sections, landing pages, portfolios, creative studios, and more."}]},{"type":"customHeading","content":[{"type":"text","text":"What makes it different?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Most buttons rely on elaborate animations or decorative elements to stand out. Dot Button keeps things simple with a small dot that complements the label and gives the button a distinctive visual identity."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose between Light and Dark button styles to suit your design. Whether you're building a minimal portfolio, a premium agency website, or a modern SaaS landing page, Dot Button fits right in."}]},{"type":"customHeading","content":[{"type":"text","text":"Instructions"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy and paste Dot Button into your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your button text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose the Light or Dark variant to match your design."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize the component to fit your layout and visual style."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect your link or interaction and publish."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Minimal Design: ","marks":[{"type":"bold"}]},{"type":"text","text":"Clean pill-shaped buttons with a distinctive dot detail."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Light & Dark Variants: ","marks":[{"type":"bold"}]},{"type":"text","text":"Choose between contrasting button styles."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern Typography: ","marks":[{"type":"bold"}]},{"type":"text","text":"Clear, readable text for a polished appearance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Versatile Use: ","marks":[{"type":"bold"}]},{"type":"text","text":"Ideal for CTAs, navigation, hero sections, and landing pages."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to Use: ","marks":[{"type":"bold"}]},{"type":"text","text":"Copy, customize, and add to your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design-Friendly: ","marks":[{"type":"bold"}]},{"type":"text","text":"A simple visual style that works across different website aesthetics."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ready to Use:","marks":[{"type":"bold"}]},{"type":"text","text":" Get started without building the button from scratch."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add a small detail that makes your buttons stand out."}]},{"type":"paragraph","content":[{"type":"text","text":"Made by "},{"type":"text","text":"Zelo Studio","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/pyczDRm","target":"_blank"}}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"blue_heart","emoji":"💙"}}]}]},"introduction":"Minimal Buttons with a Dot mask","slug":"dot-button","author":{"framerUserId":"f27b8cab-248a-4dbe-ab35-8dd9ad4a81bf","name":"Zelo Studio","slug":"zelo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f27b8cab-248a-4dbe-ab35-8dd9ad4a81bf/s1mq6yg7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f27b8cab-248a-4dbe-ab35-8dd9ad4a81bf/01a15073-2a90-77ec-a7be-c3d2af711b8f.png","metadata":{"tint":{"h":225,"s":27,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-18T19:18:40.386Z","updatedAt":"2026-10-18T19:31:57.172Z","publishedAt":"2026-10-18T19:18:40.383Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Dot-Button-MC30l2.js@tYg8ONT5dYenbwZvkeZJ","previewUrl":"https://dot-button.framer.ai","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"tYg8ONT5dYenbwZvkeZJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-18T19:18:41.072Z","updatedAt":"2026-10-18T19:18:41.072Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you