taste-skill / Components / WorkOS Buttons

WorkOS Button Styles

8 distinct WorkOS button styles extracted from workos.com — heights, padding, 100px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the WorkOS canvas

Get started Read the docs Read more Read more Read more Read more Read more Sign in

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	43px	`12px 24px`	`100px`	`#6363F1` `#FFFFFF`	`none`	`16px / 500`
Read the docs	43px	`12px 24px`	`100px`	`#23F0C3` `#030628`	`none`	`16px / 500`
Read more	51px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`
Read more	43px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`
Read more	26px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`
Read more	34px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`
Read more	60px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`
Sign in	35px	`9.5px 20px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 400`

Copy-paste code

Button 1 — Get started

<!-- WorkOS button 1: "Get started" -->
<a class="inline-flex items-center justify-center h-[43px] py-[12px] px-[24px] rounded-[100px] bg-[#6363F1] text-[#FFFFFF] text-[16px] font-[500] shadow-[rgba(23,6,100,0.035)_0px_24px_22px_0px,rgba(23,6,100,0.055)_0px_8.5846px_8.03036px_0px,rgba(23,6,100,0.067)_0px_4.77692px_3.89859px_0px,rgba(23,6,100,0.082)_0px_2.63479px_1.91116px_0px,rgba(23,6,100,0.12)_0px_1.15891px_0.755676px_0px]">Get started</a>

/* plain CSS */
.btn-workos-1 { height:43px; padding:12px 24px; border-radius:100px; background:#6363F1; color:#FFFFFF; border:0; font-size:16px; font-weight:500; box-shadow:rgba(23, 6, 100, 0.035) 0px 24px 22px 0px, rgba(23, 6, 100, 0.055) 0px 8.5846px 8.03036px 0px, rgba(23, 6, 100, 0.067) 0px 4.77692px 3.89859px 0px, rgba(23, 6, 100, 0.082) 0px 2.63479px 1.91116px 0px, rgba(23, 6, 100, 0.12) 0px 1.15891px 0.755676px 0px; }

Button 2 — Read the docs

<!-- WorkOS button 2: "Read the docs" -->
<a class="inline-flex items-center justify-center h-[43px] py-[12px] px-[24px] rounded-[100px] bg-[#23F0C3] text-[#030628] text-[16px] font-[500] shadow-[rgba(35,240,195,0.7)_0px_0px_14px_0px,rgb(25,203,164)_0px_0px_0px_1px_inset]">Read the docs</a>

/* plain CSS */
.btn-workos-2 { height:43px; padding:12px 24px; border-radius:100px; background:#23F0C3; color:#030628; border:0; font-size:16px; font-weight:500; box-shadow:rgba(35, 240, 195, 0.7) 0px 0px 14px 0px, rgb(25, 203, 164) 0px 0px 0px 1px inset; }

Button 3 — Read more

<!-- WorkOS button 3: "Read more" -->
<a class="inline-flex items-center justify-center h-[51px] py-[12px] px-[18px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[500]">Read more</a>

/* plain CSS */
.btn-workos-3 { height:51px; padding:12px 18px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:500; }

Button 4 — Read more

<!-- WorkOS button 4: "Read more" -->
<a class="inline-flex items-center justify-center h-[43px] py-[12px] px-[18px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[500]">Read more</a>

/* plain CSS */
.btn-workos-4 { height:43px; padding:12px 18px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:500; }

Button 5 — Read more

<!-- WorkOS button 5: "Read more" -->
<a class="inline-flex items-center justify-center h-[26px] py-[12px] px-[18px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[500]">Read more</a>

/* plain CSS */
.btn-workos-5 { height:26px; padding:12px 18px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:500; }

Button 6 — Read more

<!-- WorkOS button 6: "Read more" -->
<a class="inline-flex items-center justify-center h-[34px] py-[12px] px-[18px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[500]">Read more</a>

/* plain CSS */
.btn-workos-6 { height:34px; padding:12px 18px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:500; }

Button 7 — Read more

<!-- WorkOS button 7: "Read more" -->
<a class="inline-flex items-center justify-center h-[60px] py-[12px] px-[18px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[500]">Read more</a>

/* plain CSS */
.btn-workos-7 { height:60px; padding:12px 18px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:500; }

Button 8 — Sign in

<!-- WorkOS button 8: "Sign in" -->
<a class="inline-flex items-center justify-center h-[35px] py-[9.5px] px-[20px] rounded-[100px] text-[#6363F1] border-[1px] border-solid border-[#E8EAED] text-[14px] font-[400]">Sign in</a>

/* plain CSS */
.btn-workos-8 { height:35px; padding:9.5px 20px; border-radius:100px; background:transparent; color:#6363F1; border:1px solid #E8EAED; font-size:14px; font-weight:400; }

Transition seen on these buttons: ease

More WorkOS

WorkOS full token spec WorkOS style guide WorkOS Cards WorkOS Pricing Table Clerk vs WorkOS Stripe vs WorkOS

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 →