Bagaimana cara membuat tombol seperti notion.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #0075de dengan teks #ffffff, sudut 8px, tinggi 36px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai notion.com.

Apa warna tombol notion.com?

Tombol utama di notion.com berwarna #0075de dengan teks #ffffff. Situs ini memakai 3 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol notion.com?

Bisa. Paket desain notion.com dari Stylepack memuat setiap varian tombol beserta state-nya, font, warna, dan screenshot, sehingga Claude Code, Cursor, atau Copilot bisa membuat tombol yang serupa.

CSS tombol notion.com: buat tombol seperti miliknya

Tombol primary

Get Notion free

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

Tombol secondary

Request a demo

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

Tombol ghost

Product

Hover: tidak ada perubahan terlihat

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai notion.com pada tombolnya.

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}

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

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

Tombol di notion.com