taste-skill / Components / Linear Buttons
Linear Button Styles
5 distinct Linear button styles extracted from linear.app — heights, padding, 9999px/8px/16px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://linear.app on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Linear is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Linear.Rendered on the Linear canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Sign up | 32px | 0px 12px | 9999px | #E5E5E6#08090A | 1px solid #E5E5E6 | 13px / 510 |
| Get started | 44px | 0px 20px | 9999px | #E5E5E6#08090A | 1px solid #E5E5E6 | 16px / 510 |
| Contact sales | 44px | 0px 20px | 9999px | rgba(255, 255, 255, 0.05)#F7F8F8 | none | 16px / 510 |
| Faster app launch | 28px | 0px 7px | 8px | rgba(255, 255, 255, 0.04)#D0D6E0 | none | 13px / 510 |
| Performance | 24px | 0px 11px | 16px | transparent#D0D6E0 | 1px solid #2E2E32 | 12px / 400 |
Copy-paste code
Button 1 — Sign up
<!-- Linear button 1: "Sign up" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[9999px] bg-[#E5E5E6] text-[#08090A] border-[1px] border-solid border-[#E5E5E6] text-[13px] font-[510] shadow-[rgba(0,0,0,0)_0px_8px_2px_0px,rgba(0,0,0,0.01)_0px_5px_2px_0px,rgba(0,0,0,0.04)_0px_3px_2px_0px,rgba(0,0,0,0.07)_0px_1px_1px_0px,rgba(0,0,0,0.08)_0px_0px_1px_0px]">Sign up</a>
/* plain CSS */
.btn-linear-1 { height:32px; padding:0px 12px; border-radius:9999px; background:#E5E5E6; color:#08090A; border:1px solid #E5E5E6; font-size:13px; font-weight:510; box-shadow:rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px; }Button 2 — Get started
<!-- Linear button 2: "Get started" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[20px] rounded-[9999px] bg-[#E5E5E6] text-[#08090A] border-[1px] border-solid border-[#E5E5E6] text-[16px] font-[510] shadow-[rgba(0,0,0,0)_0px_8px_2px_0px,rgba(0,0,0,0.01)_0px_5px_2px_0px,rgba(0,0,0,0.04)_0px_3px_2px_0px,rgba(0,0,0,0.07)_0px_1px_1px_0px,rgba(0,0,0,0.08)_0px_0px_1px_0px]">Get started</a>
/* plain CSS */
.btn-linear-2 { height:44px; padding:0px 20px; border-radius:9999px; background:#E5E5E6; color:#08090A; border:1px solid #E5E5E6; font-size:16px; font-weight:510; box-shadow:rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px; }Button 3 — Contact sales
<!-- Linear button 3: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[44px] py-[0px] px-[20px] rounded-[9999px] bg-[rgba(255,255,255,0.05)] text-[#F7F8F8] text-[16px] font-[510] shadow-[rgba(255,255,255,0.03)_0px_0px_0px_1px_inset,rgba(255,255,255,0.04)_0px_1px_0px_0px_inset,rgba(0,0,0,0.6)_0px_0px_0px_1px,rgba(0,0,0,0.1)_0px_4px_4px_0px]">Contact sales</a>
/* plain CSS */
.btn-linear-3 { height:44px; padding:0px 20px; border-radius:9999px; background:rgba(255, 255, 255, 0.05); color:#F7F8F8; border:0; font-size:16px; font-weight:510; box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px; backdrop-filter:blur(4px); }Button 4 — Faster app launch
<!-- Linear button 4: "Faster app launch" -->
<a class="inline-flex items-center justify-center h-[28px] py-[0px] px-[7px] rounded-[8px] bg-[rgba(255,255,255,0.04)] text-[#D0D6E0] text-[13px] font-[510]">Faster app launch</a>
/* plain CSS */
.btn-linear-4 { height:28px; padding:0px 7px; border-radius:8px; background:rgba(255, 255, 255, 0.04); color:#D0D6E0; border:0; font-size:13px; font-weight:510; }Button 5 — Performance
<!-- Linear button 5: "Performance" -->
<a class="inline-flex items-center justify-center h-[24px] py-[0px] px-[11px] rounded-[16px] text-[#D0D6E0] border-[1px] border-solid border-[#2E2E32] text-[12px] font-[400]">Performance</a>
/* plain CSS */
.btn-linear-5 { height:24px; padding:0px 11px; border-radius:16px; background:transparent; color:#D0D6E0; border:1px solid #2E2E32; font-size:12px; font-weight:400; }Transition seen on these buttons: cubic-bezier(0.25, 0.46, 0.45, 0.94)
More Linear
Linear full token specLinear style guideLinear CardsLinear Pricing TableLinear vs VercelLinear vs StripeLinear vs RaycastLinear vs DubLinear vs Loops
Same component, other brands
Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.
See taste-skill Pro →