taste-skill / Components / Raycast Buttons

Raycast Button Styles

3 distinct Raycast button styles extracted from raycast.com — heights, padding, 10px/4px/8px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Raycast canvas

Sync linear tasks Send Download

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sync linear tasks	32px	`8px 12px`	`10px`	`rgba(255, 255, 255, 0.1)` `#FFFFFF`	`none`	`13px / 400`
Send	36px	`2px 12px`	`4px`	`#E6E6E6` `#2F3031`	`none`	`14px / 500`
Download	36px	`8px 12px`	`8px`	`#E6E6E6` `#2F3031`	`none`	`14px / 500`

Copy-paste code

Button 1 — Sync linear tasks

<!-- Raycast button 1: "Sync linear tasks" -->
<a class="inline-flex items-center justify-center h-[32px] py-[8px] px-[12px] rounded-[10px] bg-[rgba(255,255,255,0.1)] text-[#FFFFFF] text-[13px] font-[400]">Sync linear tasks</a>

/* plain CSS */
.btn-raycast-1 { height:32px; padding:8px 12px; border-radius:10px; background:rgba(255, 255, 255, 0.1); color:#FFFFFF; border:0; font-size:13px; font-weight:400; }

Button 2 — Send

<!-- Raycast button 2: "Send" -->
<a class="inline-flex items-center justify-center h-[36px] py-[2px] px-[12px] rounded-[4px] bg-[#E6E6E6] text-[#2F3031] text-[14px] font-[500] shadow-[rgba(0,0,0,0.5)_0px_0px_0px_2px,rgba(255,255,255,0.19)_0px_0px_14px_0px,rgba(0,0,0,0.2)_0px_-1px_0.4px_0px_inset,rgb(255,255,255)_0px_1px_0.4px_0px_inset]">Send</a>

/* plain CSS */
.btn-raycast-2 { height:36px; padding:2px 12px; border-radius:4px; background:#E6E6E6; color:#2F3031; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset; }

Button 3 — Download

<!-- Raycast button 3: "Download" -->
<a class="inline-flex items-center justify-center h-[36px] py-[8px] px-[12px] rounded-[8px] bg-[#E6E6E6] text-[#2F3031] text-[14px] font-[500] shadow-[rgba(0,0,0,0.5)_0px_0px_0px_2px,rgba(255,255,255,0.19)_0px_0px_14px_0px,rgba(0,0,0,0.2)_0px_-1px_0.4px_0px_inset,rgb(255,255,255)_0px_1px_0.4px_0px_inset]">Download</a>

/* plain CSS */
.btn-raycast-3 { height:36px; padding:8px 12px; border-radius:8px; background:#E6E6E6; color:#2F3031; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset; }

Transition seen on these buttons: ease

More Raycast

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

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Cursor 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 →