Notion Whisper

Inspired by Notion's philosophy of invisible interfaces. An ultra-restrained button with no border, no shadow, and barely-there background. It whispers rather than shouts — hover reveals a gentle surface tint. Perfect for content-first tools, note apps, and minimal dashboards.

minimalelegantwarmsaaseducationcreative

Export Snippets

Switch formats without compressing the preview layout.

AI Prompt

Natural-language design direction for AI coding tools.

Create a Notion-inspired whisper button that prioritizes content over chrome. The button has zero visual weight by default: transparent background, no border, no shadow. Text is warm dark (#2F2E2B) at 14px, font-weight 500. Icons (if present) are 16px in muted gray (#7D7870), placed left of text with 6px gap. On hover, a warm gray fill appears (#2F2E2B14) with border-radius 6px. On active/pressed state, the fill deepens to (#2F2E2B1F). On focus-visible, show a 2px ring in soft blue (#B5654A) at 2px offset for keyboard accessibility. Transition is 80ms ease — must feel instant. The design philosophy is "the interface disappears when you're not looking at it." This button conveys quiet confidence, content-first thinking, and sophisticated restraint.

Button

Notion Whisper

minimalelegantwarmsaaseducationcreative

Export Snippets

Copy or download the current format while keeping the preview in view.

AI Prompt

Natural-language design direction for AI coding tools.

Create a Notion-inspired whisper button that prioritizes content over chrome. The button has zero visual weight by default: transparent background, no border, no shadow. Text is warm dark (#2F2E2B) at 14px, font-weight 500. Icons (if present) are 16px in muted gray (#7D7870), placed left of text with 6px gap. On hover, a warm gray fill appears (#2F2E2B14) with border-radius 6px. On active/pressed state, the fill deepens to (#2F2E2B1F). On focus-visible, show a 2px ring in soft blue (#B5654A) at 2px offset for keyboard accessibility. Transition is 80ms ease — must feel instant. The design philosophy is "the interface disappears when you're not looking at it." This button conveys quiet confidence, content-first thinking, and sophisticated restraint.

Back to Explore

Button

4 export formats

Notion Whisper

minimalelegantwarmsaaseducationcreative

Interactive Preview

Export Snippets

Switch formats without compressing the preview layout.

AI Prompt

Natural-language design direction for AI coding tools.

Create a Notion-inspired whisper button that prioritizes content over chrome. The button has zero visual weight by default: transparent background, no border, no shadow. Text is warm dark (#2F2E2B) at 14px, font-weight 500. Icons (if present) are 16px in muted gray (#7D7870), placed left of text with 6px gap. On hover, a warm gray fill appears (#2F2E2B14) with border-radius 6px. On active/pressed state, the fill deepens to (#2F2E2B1F). On focus-visible, show a 2px ring in soft blue (#B5654A) at 2px offset for keyboard accessibility. Transition is 80ms ease — must feel instant. The design philosophy is "the interface disappears when you're not looking at it." This button conveys quiet confidence, content-first thinking, and sophisticated restraint.

Button

Notion Whisper

minimalelegantwarmsaaseducationcreative

Interactive Preview

Export Snippets

Copy or download the current format while keeping the preview in view.

AI Prompt

Natural-language design direction for AI coding tools.

Create a Notion-inspired whisper button that prioritizes content over chrome. The button has zero visual weight by default: transparent background, no border, no shadow. Text is warm dark (#2F2E2B) at 14px, font-weight 500. Icons (if present) are 16px in muted gray (#7D7870), placed left of text with 6px gap. On hover, a warm gray fill appears (#2F2E2B14) with border-radius 6px. On active/pressed state, the fill deepens to (#2F2E2B1F). On focus-visible, show a 2px ring in soft blue (#B5654A) at 2px offset for keyboard accessibility. Transition is 80ms ease — must feel instant. The design philosophy is "the interface disappears when you're not looking at it." This button conveys quiet confidence, content-first thinking, and sophisticated restraint.