taste-skill / Components / Dub Buttons

Dub Button Styles

9 distinct Dub button styles extracted from dub.co — heights, padding, 8px/9999px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Dub canvas

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 16px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 400`
Start for free	38px	`8px 20px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 500`
Start for free	40px	`0px 20px`	`8px`	`#FFFFFF` `#171717`	`1px solid #E5E5E5`	`14px / 500`
Log in	32px	`0px 16px`	`8px`	`#FFFFFF` `#171717`	`1px solid #E5E5E5`	`14px / 400`
Get a demo	38px	`8px 20px`	`8px`	`#FFFFFF` `#262626`	`1px solid #E5E5E5`	`14px / 500`
Get a demo	40px	`0px 20px`	`8px`	`rgba(255, 255, 255, 0.2)` `#FFFFFF`	`none`	`14px / 500`
Button	30px	`0px 0px`	`9999px`	`#FFFFFF` `#0A0A0A`	`1px solid #D4D4D4`	`12px / 500`
Affiliate Programs	34px	`8px 12px`	`8px`	`#FFFFFF` `#262626`	`1px solid #E5E5E5`	`16px / 400`
Conversion Analytics	34px	`8px 12px`	`8px`	`#F5F5F5` `#525252`	`none`	`16px / 400`

Copy-paste code

Button 1 — Sign up

<!-- Dub button 1: "Sign up" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[16px] rounded-[8px] bg-[#000000] text-[#FFFFFF] border-[1px] border-solid border-[#000000] text-[14px] font-[400]">Sign up</a>

/* plain CSS */
.btn-dub-1 { height:32px; padding:0px 16px; border-radius:8px; background:#000000; color:#FFFFFF; border:1px solid #000000; font-size:14px; font-weight:400; }

Button 2 — Start for free

<!-- Dub button 2: "Start for free" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[20px] rounded-[8px] bg-[#000000] text-[#FFFFFF] border-[1px] border-solid border-[#000000] 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.05)_0px_1px_2px_0px]">Start for free</a>

/* plain CSS */
.btn-dub-2 { height:38px; padding:8px 20px; border-radius:8px; background:#000000; color:#FFFFFF; border:1px solid #000000; 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.05) 0px 1px 2px 0px; }

Button 3 — Start for free

<!-- Dub button 3: "Start for free" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[20px] rounded-[8px] bg-[#FFFFFF] text-[#171717] border-[1px] border-solid border-[#E5E5E5] text-[14px] font-[500]">Start for free</a>

/* plain CSS */
.btn-dub-3 { height:40px; padding:0px 20px; border-radius:8px; background:#FFFFFF; color:#171717; border:1px solid #E5E5E5; font-size:14px; font-weight:500; }

Button 4 — Log in

<!-- Dub button 4: "Log in" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[16px] rounded-[8px] bg-[#FFFFFF] text-[#171717] border-[1px] border-solid border-[#E5E5E5] text-[14px] font-[400]">Log in</a>

/* plain CSS */
.btn-dub-4 { height:32px; padding:0px 16px; border-radius:8px; background:#FFFFFF; color:#171717; border:1px solid #E5E5E5; font-size:14px; font-weight:400; }

Button 5 — Get a demo

<!-- Dub button 5: "Get a demo" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[20px] rounded-[8px] bg-[#FFFFFF] text-[#262626] border-[1px] border-solid border-[#E5E5E5] 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.05)_0px_1px_2px_0px]">Get a demo</a>

/* plain CSS */
.btn-dub-5 { height:38px; padding:8px 20px; border-radius:8px; background:#FFFFFF; color:#262626; border:1px solid #E5E5E5; 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.05) 0px 1px 2px 0px; }

Button 6 — Get a demo

<!-- Dub button 6: "Get a demo" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[20px] rounded-[8px] bg-[rgba(255,255,255,0.2)] text-[#FFFFFF] text-[14px] font-[500]">Get a demo</a>

/* plain CSS */
.btn-dub-6 { height:40px; padding:0px 20px; border-radius:8px; background:rgba(255, 255, 255, 0.2); color:#FFFFFF; border:0; font-size:14px; font-weight:500; backdrop-filter:blur(4px); }

Button 7 — Button

<!-- Dub button 7: "Button" -->
<a class="inline-flex items-center justify-center h-[30px] py-[0px] px-[0px] rounded-[9999px] bg-[#FFFFFF] text-[#0A0A0A] border-[1px] border-solid border-[#D4D4D4] text-[12px] font-[500]">Button</a>

/* plain CSS */
.btn-dub-7 { height:30px; padding:0px 0px; border-radius:9999px; background:#FFFFFF; color:#0A0A0A; border:1px solid #D4D4D4; font-size:12px; font-weight:500; }

Button 8 — Affiliate Programs

<!-- Dub button 8: "Affiliate Programs" -->
<a class="inline-flex items-center justify-center h-[34px] py-[8px] px-[12px] rounded-[8px] bg-[#FFFFFF] text-[#262626] border-[1px] border-solid border-[#E5E5E5] text-[16px] font-[400]">Affiliate Programs</a>

/* plain CSS */
.btn-dub-8 { height:34px; padding:8px 12px; border-radius:8px; background:#FFFFFF; color:#262626; border:1px solid #E5E5E5; font-size:16px; font-weight:400; }

Button 9 — Conversion Analytics

<!-- Dub button 9: "Conversion Analytics" -->
<a class="inline-flex items-center justify-center h-[34px] py-[8px] px-[12px] rounded-[8px] bg-[#F5F5F5] text-[#525252] text-[16px] font-[400]">Conversion Analytics</a>

/* plain CSS */
.btn-dub-9 { height:34px; padding:8px 12px; border-radius:8px; background:#F5F5F5; color:#525252; border:0; font-size:16px; font-weight:400; }

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 →

Dub Button Styles

Rendered on the Dub canvas

Button specs

Copy-paste code

More Dub

Same component, other brands