taste-skill / Components / Supabase Buttons
Supabase Button Styles
6 distinct Supabase button styles extracted from supabase.com — heights, padding, 9.29231px/9999px/8.86154px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://supabase.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Supabase is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Supabase.Rendered on the Supabase canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Request a demo | 38px | 8px 16px | 9.29231px | #FFFFFF#030303 | none | 14px / 500 |
| Read docs for React | 30px | 6px 12px | 9999px | #FFFFFF#464646 | 1px solid rgba(0, 0, 0, 0.08) | 12px / 450 |
| Product | 64px | 8px 10px | 8.86154px | transparent#030303 | none | 14px / 500 |
| Table Editor | 38px | 8px 32px | 9999px | #FDFDFD#030303 | 1px solid #030303 | 14px / 450 |
| Subscribe | 26px | 4px 10px | 8px | #0E7E4E#FAFCFB | none | 12px / 500 |
| Start your project | 38px | 8px 16px | 9.29231px | #0E7E4E#FAFCFB | none | 14px / 500 |
Copy-paste code
Button 1 — Request a demo
<!-- Supabase button 1: "Request a demo" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[16px] rounded-[9.29231px] bg-[#FFFFFF] text-[#030303] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.04)_0px_1px_3px_0px,rgba(0,0,0,0.027)_0px_1px_0px_0px_inset,rgba(0,0,0,0.04)_0px_0px_0px_1px_inset,rgba(0,0,0,0.04)_0px_-1px_0px_0px_inset,rgba(0,0,0,0.067)_0px_0px_0px_1px_inset]">Request a demo</a>
/* plain CSS */
.btn-supabase-1 { height:38px; padding:8px 16px; border-radius:9.29231px; background:#FFFFFF; color:#030303; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset; }Button 2 — Read docs for React
<!-- Supabase button 2: "Read docs for React" -->
<a class="inline-flex items-center justify-center h-[30px] py-[6px] px-[12px] rounded-[9999px] bg-[#FFFFFF] text-[#464646] border-[1px] border-solid border-[rgba(0,0,0,0.08)] text-[12px] font-[450]">Read docs for React</a>
/* plain CSS */
.btn-supabase-2 { height:30px; padding:6px 12px; border-radius:9999px; background:#FFFFFF; color:#464646; border:1px solid rgba(0, 0, 0, 0.08); font-size:12px; font-weight:450; }Button 3 — Product
<!-- Supabase button 3: "Product" -->
<a class="inline-flex items-center justify-center h-[64px] py-[8px] px-[10px] rounded-[8.86154px] text-[#030303] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px]">Product</a>
/* plain CSS */
.btn-supabase-3 { height:64px; padding:8px 10px; border-radius:8.86154px; background:transparent; color:#030303; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; }Button 4 — Table Editor
<!-- Supabase button 4: "Table Editor" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[32px] rounded-[9999px] bg-[#FDFDFD] text-[#030303] border-[1px] border-solid border-[#030303] text-[14px] font-[450]">Table Editor</a>
/* plain CSS */
.btn-supabase-4 { height:38px; padding:8px 32px; border-radius:9999px; background:#FDFDFD; color:#030303; border:1px solid #030303; font-size:14px; font-weight:450; }Button 5 — Subscribe
<!-- Supabase button 5: "Subscribe" -->
<a class="inline-flex items-center justify-center h-[26px] py-[4px] px-[10px] rounded-[8px] bg-[#0E7E4E] text-[#FAFCFB] text-[12px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.04)_0px_1px_3px_0px,rgba(0,0,0,0.027)_0px_1px_0px_0px_inset,rgba(0,0,0,0.04)_0px_0px_0px_1px_inset,rgba(0,0,0,0.067)_0px_0px_0px_1px_inset]">Subscribe</a>
/* plain CSS */
.btn-supabase-5 { height:26px; padding:4px 10px; border-radius:8px; background:#0E7E4E; color:#FAFCFB; border:0; font-size:12px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset; }Button 6 — Start your project
<!-- Supabase button 6: "Start your project" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[16px] rounded-[9.29231px] bg-[#0E7E4E] text-[#FAFCFB] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0.04)_0px_1px_3px_0px,rgba(0,0,0,0.027)_0px_1px_0px_0px_inset,rgba(0,0,0,0.04)_0px_0px_0px_1px_inset,rgba(0,0,0,0.067)_0px_0px_0px_1px_inset]">Start your project</a>
/* plain CSS */
.btn-supabase-6 { height:38px; padding:8px 16px; border-radius:9.29231px; background:#0E7E4E; color:#FAFCFB; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset; }Transition seen on these buttons: cubic-bezier(0.22, 1, 0.36, 1)
More Supabase
Supabase full token specSupabase style guideSupabase CardsSupabase Pricing TableSupabase vs NeonVercel vs SupabaseSupabase vs UpstashSupabase vs PlanetScaleSupabase vs Clerk
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 →