taste-skill / Components / Vercel Buttons

Vercel Button Styles

4 distinct Vercel button styles extracted from vercel.com — heights, padding, 6px/9999px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Vercel canvas

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign Up	32px	`0px 6px`	`6px`	`#171717` `#FFFFFF`	`none`	`14px / 500`
Deploy now	40px	`0px 12px`	`9999px`	`#171717` `#FFFFFF`	`none`	`16px / 500`
Log In	32px	`0px 6px`	`6px`	`#FFFFFF` `#171717`	`none`	`14px / 500`
Talk to sales	40px	`0px 12px`	`9999px`	`#FFFFFF` `#171717`	`none`	`16px / 500`

Copy-paste code

Button 1 — Sign Up

<!-- Vercel button 1: "Sign Up" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[6px] rounded-[6px] bg-[#171717] text-[#FFFFFF] text-[14px] font-[500]">Sign Up</a>

/* plain CSS */
.btn-vercel-1 { height:32px; padding:0px 6px; border-radius:6px; background:#171717; color:#FFFFFF; border:0; font-size:14px; font-weight:500; }

Button 2 — Deploy now

<!-- Vercel button 2: "Deploy now" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[12px] rounded-[9999px] bg-[#171717] text-[#FFFFFF] text-[16px] font-[500]">Deploy now</a>

/* plain CSS */
.btn-vercel-2 { height:40px; padding:0px 12px; border-radius:9999px; background:#171717; color:#FFFFFF; border:0; font-size:16px; font-weight:500; }

Button 3 — Log In

<!-- Vercel button 3: "Log In" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[6px] rounded-[6px] bg-[#FFFFFF] text-[#171717] 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,rgb(235,235,235)_0px_0px_0px_1px]">Log In</a>

/* plain CSS */
.btn-vercel-3 { height:32px; padding:0px 6px; border-radius:6px; background:#FFFFFF; color:#171717; 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, rgb(235, 235, 235) 0px 0px 0px 1px; }

Button 4 — Talk to sales

<!-- Vercel button 4: "Talk to sales" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[12px] rounded-[9999px] bg-[#FFFFFF] text-[#171717] text-[16px] 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,rgb(235,235,235)_0px_0px_0px_1px]">Talk to sales</a>

/* plain CSS */
.btn-vercel-4 { height:40px; padding:0px 12px; border-radius:9999px; background:#FFFFFF; color:#171717; border:0; font-size:16px; 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, rgb(235, 235, 235) 0px 0px 0px 1px; }

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

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

See taste-skill Pro →

Vercel Button Styles

Rendered on the Vercel canvas

Button specs

Copy-paste code

More Vercel

Same component, other brands