How do I make buttons like notion.com?

Use the CSS on this page: the primary button is #0075de with #ffffff text, 8px corners, 36px tall. Add the hover and focus rules listed under each variant and set the button font to the one notion.com uses.

What color are the notion.com buttons?

The primary button on notion.com is #0075de with #ffffff text. The site uses 3 button variants in total; each one is listed on this page with its background, border, radius and size.

Can an AI coding agent copy the notion.com buttons?

Yes. The notion.com design pack from Stylepack holds every button variant with its states, the fonts, the colors and screenshots, so Claude Code, Cursor or Copilot can build buttons that match.

notion.com button CSS: make buttons like theirs

primary button

Get Notion free

Hover: background #0075de → #005bab
Focus: outline 2px solid rgba(0, 117, 222, 0.925), offset 2px
Transition: all, 0s

secondary button

Request a demo

Hover: background #0075de → #005bab
Transition: background-color, color, 0.2s

ghost button

Product

Hover: no visible change

The CSS

One class per variant, with the measured values. The font is the one notion.com sets on its buttons.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 36px;
6  padding: 4px 14px;
7  background: #0075de;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 8px;
11  font-size: 16px;
12  font-weight: 500;
13  font-family: "NotionInter", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 38px;
22  padding: 6px 15px;
23  background: #e6f3fe;
24  color: #005bab;
25  border: 1px solid transparent;
26  border-radius: 8px;
27  font-size: 16px;
28  font-weight: 500;
29  font-family: "NotionInter", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 30px;
38  padding: 5px 10px;
39  background: transparent;
40  color: #000000e5;
41  border: none;
42  border-radius: 4px;
43  font-size: 16px;
44  font-weight: 400;
45  font-family: "NotionInter", sans-serif;
46  cursor: pointer;
47}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/notion.com/DESIGN.md

The buttons on notion.com