taste-skill / Components / Polar Buttons

Polar Button Styles

3 distinct Polar button styles extracted from polar.sh — heights, padding, 9999px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Polar canvas

Get Started Get Started Contact Sales

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get Started	40px	`12px 20px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 550`
Get Started	48px	`16px 20px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 550`
Contact Sales	40px	`12px 20px`	`9999px`	`#212121` `#FFFFFF`	`1px solid rgba(255, 255, 255, 0.05)`	`14px / 550`

Copy-paste code

Button 1 — Get Started

<!-- Polar button 1: "Get Started" -->
<a class="inline-flex items-center justify-center h-[40px] py-[12px] px-[20px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[14px] font-[550]">Get Started</a>

/* plain CSS */
.btn-polar-1 { height:40px; padding:12px 20px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:14px; font-weight:550; }

Button 2 — Get Started

<!-- Polar button 2: "Get Started" -->
<a class="inline-flex items-center justify-center h-[48px] py-[16px] px-[20px] rounded-[9999px] bg-[#FFFFFF] text-[#000000] text-[14px] font-[550]">Get Started</a>

/* plain CSS */
.btn-polar-2 { height:48px; padding:16px 20px; border-radius:9999px; background:#FFFFFF; color:#000000; border:0; font-size:14px; font-weight:550; }

Button 3 — Contact Sales

<!-- Polar button 3: "Contact Sales" -->
<a class="inline-flex items-center justify-center h-[40px] py-[12px] px-[20px] rounded-[9999px] bg-[#212121] text-[#FFFFFF] border-[1px] border-solid border-[rgba(255,255,255,0.05)] text-[14px] font-[550]">Contact Sales</a>

/* plain CSS */
.btn-polar-3 { height:40px; padding:12px 20px; border-radius:9999px; background:#212121; color:#FFFFFF; border:1px solid rgba(255, 255, 255, 0.05); font-size:14px; font-weight:550; }

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

More Polar

Polar full token spec Polar style guide Polar Cards Polar Pricing Table Stripe vs Polar

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 PlanetScale Buttons Neon Buttons

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

See taste-skill Pro →