taste-skill / Components / Stripe Buttons
Stripe Button Styles
8 distinct Stripe button styles extracted from stripe.com — heights, padding, 4px radius, colors — with copy-paste CSS and Tailwind classes.
Source: computed styles extracted from
https://stripe.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Stripe is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Stripe.Rendered on the Stripe canvas
Button specs
| Rendered | Height | Padding | Radius | Background / Text | Border | Font |
|---|---|---|---|---|---|---|
| Get started | 48px | 15.5px 24px | 4px | #533AFD#FFFFFF | none | 16px / 400 |
| Sign in | 40px | 11.5px 20px | 4px | transparent#533AFD | 1px solid #FFFFFF | 14px / 400 |
| Sign up with Google | 48px | 14.5px 24px | 4px | rgba(255, 255, 255, 0.65)#533AFD | 1px solid #B9B9F9 | 16px / 400 |
| Contact sales | 40px | 11.5px 20px | 4px | #533AFD#FFFFFF | none | 14px / 400 |
| Contact sales | 48px | 14.5px 24px | 4px | transparent#533AFD | 1px solid #B9B9F9 | 16px / 400 |
| Watch now | 48px | 15.5px 24px | 4px | #FFFFFF#533AFD | none | 16px / 400 |
| View Stripe’s GitHub | 48px | 14.5px 24px | 4px | transparent#FFFFFF | 1px solid rgba(72, 52, 219, 0.7) | 16px / 400 |
| Stripe Press | 38px | 2px 2px | 4px | transparent#0000EE | 1px solid #E5EDF5 | 16px / 400 |
Copy-paste code
Button 1 — Get started
<!-- Stripe button 1: "Get started" -->
<a class="inline-flex items-center justify-center h-[48px] py-[15.5px] px-[24px] rounded-[4px] bg-[#533AFD] text-[#FFFFFF] text-[16px] font-[400]">Get started</a>
/* plain CSS */
.btn-stripe-1 { height:48px; padding:15.5px 24px; border-radius:4px; background:#533AFD; color:#FFFFFF; border:0; font-size:16px; font-weight:400; }Button 2 — Sign in
<!-- Stripe button 2: "Sign in" -->
<a class="inline-flex items-center justify-center h-[40px] py-[11.5px] px-[20px] rounded-[4px] text-[#533AFD] border-[1px] border-solid border-[#FFFFFF] text-[14px] font-[400]">Sign in</a>
/* plain CSS */
.btn-stripe-2 { height:40px; padding:11.5px 20px; border-radius:4px; background:transparent; color:#533AFD; border:1px solid #FFFFFF; font-size:14px; font-weight:400; }Button 3 — Sign up with Google
<!-- Stripe button 3: "Sign up with Google" -->
<a class="inline-flex items-center justify-center h-[48px] py-[14.5px] px-[24px] rounded-[4px] bg-[rgba(255,255,255,0.65)] text-[#533AFD] border-[1px] border-solid border-[#B9B9F9] text-[16px] font-[400]">Sign up with Google</a>
/* plain CSS */
.btn-stripe-3 { height:48px; padding:14.5px 24px; border-radius:4px; background:rgba(255, 255, 255, 0.65); color:#533AFD; border:1px solid #B9B9F9; font-size:16px; font-weight:400; }Button 4 — Contact sales
<!-- Stripe button 4: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[40px] py-[11.5px] px-[20px] rounded-[4px] bg-[#533AFD] text-[#FFFFFF] text-[14px] font-[400]">Contact sales</a>
/* plain CSS */
.btn-stripe-4 { height:40px; padding:11.5px 20px; border-radius:4px; background:#533AFD; color:#FFFFFF; border:0; font-size:14px; font-weight:400; }Button 5 — Contact sales
<!-- Stripe button 5: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[48px] py-[14.5px] px-[24px] rounded-[4px] text-[#533AFD] border-[1px] border-solid border-[#B9B9F9] text-[16px] font-[400]">Contact sales</a>
/* plain CSS */
.btn-stripe-5 { height:48px; padding:14.5px 24px; border-radius:4px; background:transparent; color:#533AFD; border:1px solid #B9B9F9; font-size:16px; font-weight:400; }Button 6 — Watch now
<!-- Stripe button 6: "Watch now" -->
<a class="inline-flex items-center justify-center h-[48px] py-[15.5px] px-[24px] rounded-[4px] bg-[#FFFFFF] text-[#533AFD] text-[16px] font-[400]">Watch now</a>
/* plain CSS */
.btn-stripe-6 { height:48px; padding:15.5px 24px; border-radius:4px; background:#FFFFFF; color:#533AFD; border:0; font-size:16px; font-weight:400; }Button 7 — View Stripe’s GitHub
<!-- Stripe button 7: "View Stripe’s GitHub" -->
<a class="inline-flex items-center justify-center h-[48px] py-[14.5px] px-[24px] rounded-[4px] text-[#FFFFFF] border-[1px] border-solid border-[rgba(72,52,219,0.7)] text-[16px] font-[400]">View Stripe’s GitHub</a>
/* plain CSS */
.btn-stripe-7 { height:48px; padding:14.5px 24px; border-radius:4px; background:transparent; color:#FFFFFF; border:1px solid rgba(72, 52, 219, 0.7); font-size:16px; font-weight:400; }Button 8 — Stripe Press
<!-- Stripe button 8: "Stripe Press" -->
<a class="inline-flex items-center justify-center h-[38px] py-[2px] px-[2px] rounded-[4px] text-[#0000EE] border-[1px] border-solid border-[#E5EDF5] text-[16px] font-[400]">Stripe Press</a>
/* plain CSS */
.btn-stripe-8 { height:38px; padding:2px 2px; border-radius:4px; background:transparent; color:#0000EE; border:1px solid #E5EDF5; font-size:16px; font-weight:400; }Transition seen on these buttons: cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1)
More Stripe
Stripe full token specStripe style guideStripe CardsStripe Pricing TableLinear vs StripeStripe vs PolarStripe vs WorkOSStripe vs Ashby
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 →