taste-skill / Components / Notion Buttons

Notion Button Styles

5 distinct Notion button styles extracted from notion.so — heights, padding, 8px/9999px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Notion canvas

Get Notion free Get Notion free Request a demo Request a demo English (US)

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get Notion free	36px	`4px 14px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Get Notion free	38px	`6px 15px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Request a demo	38px	`6px 15px`	`8px`	`#E6F3FE` `#005BAB`	`none`	`16px / 500`
Request a demo	38px	`6px 15px`	`8px`	`#FFFFFF` `#097FE8`	`none`	`16px / 500`
English (US)	38px	`8px 16px`	`9999px`	`#FFFFFF` `rgba(0, 0, 0, 0.95)`	`1px solid rgba(0, 0, 0, 0.1)`	`14px / 500`

Copy-paste code

Button 1 — Get Notion free

<!-- Notion button 1: "Get Notion free" -->
<a class="inline-flex items-center justify-center h-[36px] py-[4px] px-[14px] rounded-[8px] bg-[#0075DE] text-[#FFFFFF] text-[16px] font-[500]">Get Notion free</a>

/* plain CSS */
.btn-notion-1 { height:36px; padding:4px 14px; border-radius:8px; background:#0075DE; color:#FFFFFF; border:0; font-size:16px; font-weight:500; }

Button 2 — Get Notion free

<!-- Notion button 2: "Get Notion free" -->
<a class="inline-flex items-center justify-center h-[38px] py-[6px] px-[15px] rounded-[8px] bg-[#0075DE] text-[#FFFFFF] text-[16px] font-[500]">Get Notion free</a>

/* plain CSS */
.btn-notion-2 { height:38px; padding:6px 15px; border-radius:8px; background:#0075DE; color:#FFFFFF; border:0; font-size:16px; font-weight:500; }

Button 3 — Request a demo

<!-- Notion button 3: "Request a demo" -->
<a class="inline-flex items-center justify-center h-[38px] py-[6px] px-[15px] rounded-[8px] bg-[#E6F3FE] text-[#005BAB] text-[16px] font-[500]">Request a demo</a>

/* plain CSS */
.btn-notion-3 { height:38px; padding:6px 15px; border-radius:8px; background:#E6F3FE; color:#005BAB; border:0; font-size:16px; font-weight:500; }

Button 4 — Request a demo

<!-- Notion button 4: "Request a demo" -->
<a class="inline-flex items-center justify-center h-[38px] py-[6px] px-[15px] rounded-[8px] bg-[#FFFFFF] text-[#097FE8] text-[16px] font-[500]">Request a demo</a>

/* plain CSS */
.btn-notion-4 { height:38px; padding:6px 15px; border-radius:8px; background:#FFFFFF; color:#097FE8; border:0; font-size:16px; font-weight:500; }

Button 5 — English (US)

<!-- Notion button 5: "English (US)" -->
<a class="inline-flex items-center justify-center h-[38px] py-[8px] px-[16px] rounded-[9999px] bg-[#FFFFFF] text-[rgba(0,0,0,0.95)] border-[1px] border-solid border-[rgba(0,0,0,0.1)] text-[14px] font-[500]">English (US)</a>

/* plain CSS */
.btn-notion-5 { height:38px; padding:8px 16px; border-radius:9999px; background:#FFFFFF; color:rgba(0, 0, 0, 0.95); border:1px solid rgba(0, 0, 0, 0.1); font-size:14px; font-weight:500; }

Transition seen on these buttons: ease

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

See taste-skill Pro →

Notion Button Styles

Rendered on the Notion canvas

Button specs

Copy-paste code

More Notion

Same component, other brands