notion.com gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #0075de zemin, #ffffff metin, 8px köşe, 36px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu notion.com sitesinin kullandığı fonta ayarlayın.

notion.com düğmeleri hangi renk?

notion.com sitesinin birincil düğmesi #0075de zemin üzerinde #ffffff metin. Site toplam 3 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

Bir yapay zeka kodlama ajanı notion.com düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki notion.com tasarım paketi her düğme varyantını durumlarıyla, fontlarıyla, renkleriyle ve ekran görüntüleriyle içerir; böylece Claude Code, Cursor ya da Copilot aynı görünümde düğmeler kurabilir.

notion.com buton CSS: aynı düğmeleri siz de yapın

primary düğmesi

Get Notion free

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

secondary düğmesi

Request a demo

Hover: background #0075de → #005bab
Geçiş: background-color, color, 0.2s

ghost düğmesi

Product

Hover: görünür değişiklik yok

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, notion.com sitesinin düğmelerinde kullandığı font.

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}

Yapay zeka ajanları için

Paket düz metindir, anahtar gerekmez: DESIGN.md dosyasını alın ya da tüm paketi MCP sunucusuyla Claude Code, Cursor veya Copilot'a verin.

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

notion.com sitesindeki düğmeler