taste-skill / Components / Cursor Buttons

Cursor Button Styles

8 distinct Cursor button styles extracted from cursor.com — heights, padding, 9999px/0px/10px radius, colors — with copy-paste CSS and Tailwind classes.

Source: computed styles extracted from https://www.cursor.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Cursor is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Cursor.

Rendered on the Cursor canvas

Contact sales Request a demo →Button See projects Button Grok 4.7 ✓🌐 English ↓Download

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Contact sales	27px	`5.6px 10.5px`	`9999px`	`transparent` `#26251E`	`1px solid rgba(40, 35, 30, 0.2)`	`14px / 400`
Request a demo →	43px	`12.48px 21.6px`	`9999px`	`#E6E5E0` `#26251E`	`1px solid rgba(42, 42, 42, 0.02)`	`16px / 400`
Button	51px	`10px 12px`	`0px`	`#EBEAE5` `#26251E`	`none`	`12px / 400`
See projects	35px	`6px 12px`	`0px`	`rgba(34, 34, 34, 0.06)` `rgba(38, 36, 29, 0.55)`	`none`	`17.28px / 400`
Button	53px	`8px 8px`	`10px`	`rgba(18, 18, 18, 0.05)` `#141414`	`none`	`16px / 400`
Grok 4.7 ✓	29px	`5.6px 7.5px`	`4px`	`#EBEAE5` `#26251E`	`none`	`13px / 400`
🌐 English ↓	27px	`5.6px 10.5px`	`9999px`	`#E6E5E0` `#26251E`	`1px solid rgba(42, 42, 42, 0.02)`	`14px / 400`
Download	27px	`5.6px 10.5px`	`9999px`	`#26251E` `#F7F7F4`	`1px solid #26251E`	`14px / 400`

Copy-paste code

Button 1 — Contact sales

<!-- Cursor button 1: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[27px] py-[5.6px] px-[10.5px] rounded-[9999px] text-[#26251E] border-[1px] border-solid border-[rgba(40,35,30,0.2)] text-[14px] font-[400]">Contact sales</a>

/* plain CSS */
.btn-cursor-1 { height:27px; padding:5.6px 10.5px; border-radius:9999px; background:transparent; color:#26251E; border:1px solid rgba(40, 35, 30, 0.2); font-size:14px; font-weight:400; }

Button 2 — Request a demo →

<!-- Cursor button 2: "Request a demo →" -->
<a class="inline-flex items-center justify-center h-[43px] py-[12.48px] px-[21.6px] rounded-[9999px] bg-[#E6E5E0] text-[#26251E] border-[1px] border-solid border-[rgba(42,42,42,0.02)] text-[16px] font-[400]">Request a demo →</a>

/* plain CSS */
.btn-cursor-2 { height:43px; padding:12.48px 21.6px; border-radius:9999px; background:#E6E5E0; color:#26251E; border:1px solid rgba(42, 42, 42, 0.02); font-size:16px; font-weight:400; }

Button 3 — Button

<!-- Cursor button 3: "Button" -->
<a class="inline-flex items-center justify-center h-[51px] py-[10px] px-[12px] rounded-[0px] bg-[#EBEAE5] text-[#26251E] text-[12px] font-[400]">Button</a>

/* plain CSS */
.btn-cursor-3 { height:51px; padding:10px 12px; border-radius:0px; background:#EBEAE5; color:#26251E; border:0; font-size:12px; font-weight:400; }

Button 4 — See projects

<!-- Cursor button 4: "See projects" -->
<a class="inline-flex items-center justify-center h-[35px] py-[6px] px-[12px] rounded-[0px] bg-[rgba(34,34,34,0.06)] text-[rgba(38,36,29,0.55)] text-[17.28px] font-[400]">See projects</a>

/* plain CSS */
.btn-cursor-4 { height:35px; padding:6px 12px; border-radius:0px; background:rgba(34, 34, 34, 0.06); color:rgba(38, 36, 29, 0.55); border:0; font-size:17.28px; font-weight:400; }

Button 5 — Button

<!-- Cursor button 5: "Button" -->
<a class="inline-flex items-center justify-center h-[53px] py-[8px] px-[8px] rounded-[10px] bg-[rgba(18,18,18,0.05)] text-[#141414] text-[16px] font-[400]">Button</a>

/* plain CSS */
.btn-cursor-5 { height:53px; padding:8px 8px; border-radius:10px; background:rgba(18, 18, 18, 0.05); color:#141414; border:0; font-size:16px; font-weight:400; }

Button 6 — Grok 4.7 ✓

<!-- Cursor button 6: "Grok 4.7 ✓" -->
<a class="inline-flex items-center justify-center h-[29px] py-[5.6px] px-[7.5px] rounded-[4px] bg-[#EBEAE5] text-[#26251E] text-[13px] font-[400]">Grok 4.7 ✓</a>

/* plain CSS */
.btn-cursor-6 { height:29px; padding:5.6px 7.5px; border-radius:4px; background:#EBEAE5; color:#26251E; border:0; font-size:13px; font-weight:400; }

Button 7 — 🌐 English ↓

<!-- Cursor button 7: "🌐 English ↓" -->
<a class="inline-flex items-center justify-center h-[27px] py-[5.6px] px-[10.5px] rounded-[9999px] bg-[#E6E5E0] text-[#26251E] border-[1px] border-solid border-[rgba(42,42,42,0.02)] text-[14px] font-[400]">🌐 English ↓</a>

/* plain CSS */
.btn-cursor-7 { height:27px; padding:5.6px 10.5px; border-radius:9999px; background:#E6E5E0; color:#26251E; border:1px solid rgba(42, 42, 42, 0.02); font-size:14px; font-weight:400; }

Button 8 — Download

<!-- Cursor button 8: "Download" -->
<a class="inline-flex items-center justify-center h-[27px] py-[5.6px] px-[10.5px] rounded-[9999px] bg-[#26251E] text-[#F7F7F4] border-[1px] border-solid border-[#26251E] text-[14px] font-[400]">Download</a>

/* plain CSS */
.btn-cursor-8 { height:27px; padding:5.6px 10.5px; border-radius:9999px; background:#26251E; color:#F7F7F4; border:1px solid #26251E; font-size:14px; font-weight:400; }

Transition seen on these buttons: ease

More Cursor

Cursor full token spec Cursor style guide Cursor Cards Cursor Pricing Table Raycast vs Cursor Cursor vs Anthropic Cursor vs Notion

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Mintlify Buttons Dub Buttons Trigger.dev Buttons PlanetScale Buttons Neon Buttons Upstash Buttons

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →