taste-skill / Components / PlanetScale Buttons

PlanetScale Button Styles

2 distinct PlanetScale button styles extracted from planetscale.com — heights, padding, 0px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the PlanetScale canvas

Get in touchView sandbox

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get in touch	32px	`0px 8px`	`0px`	`#F35815` `#FFFFFF`	`none`	`16px / 600`
View sandbox	32px	`0px 8px`	`0px`	`transparent` `#414141`	`2px solid #F35815`	`16px / 600`

Copy-paste code

Button 1 — Get in touch

<!-- PlanetScale button 1: "Get in touch" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[8px] rounded-[0px] bg-[#F35815] text-[#FFFFFF] text-[16px] font-[600]">Get in touch</a>

/* plain CSS */
.btn-planetscale-1 { height:32px; padding:0px 8px; border-radius:0px; background:#F35815; color:#FFFFFF; border:0; font-size:16px; font-weight:600; }

Button 2 — View sandbox

<!-- PlanetScale button 2: "View sandbox" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[8px] rounded-[0px] text-[#414141] border-[2px] border-solid border-[#F35815] text-[16px] font-[600]">View sandbox</a>

/* plain CSS */
.btn-planetscale-2 { height:32px; padding:0px 8px; border-radius:0px; background:transparent; color:#414141; border:2px solid #F35815; font-size:16px; font-weight:600; }

Transition seen on these buttons: cubic-bezier(0.4, 0, 0.2, 1)

More PlanetScale

PlanetScale full token spec PlanetScale style guide PlanetScale vs Turso Supabase vs PlanetScale PlanetScale vs Upstash

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Cursor Buttons Mintlify Buttons Dub Buttons Trigger.dev 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 →