linear.app gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #e5e5e6 zemin, #08090a metin, 9999px köşe, 32px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu linear.app sitesinin kullandığı fonta ayarlayın.

linear.app düğmeleri hangi renk?

linear.app sitesinin birincil düğmesi #e5e5e6 zemin üzerinde #08090a 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ı linear.app düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki linear.app 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.

linear.app buton CSS: aynı düğmeleri siz de yapın

primary düğmesi

Hover: görünür değişiklik yok
Focus: outline 1px solid rgb(94, 105, 209), offset 2px
Geçiş: border, background-color, color, box-shadow, opacity, filter, transform, 0.16s

secondary düğmesi

Performance

Hover: görünür değişiklik yok
Geçiş: all, 0s

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, linear.app sitesinin düğmelerinde kullandığı font.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 0px 12px;
7  background: #e5e5e6;
8  color: #08090a;
9  border: 1px solid #e5e5e6;
10  border-radius: 9999px;
11  font-size: 13px;
12  font-weight: 510;
13  font-family: "Inter Variable", sans-serif;
14  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 24px;
23  padding: 0px 11px;
24  background: transparent;
25  color: #d0d6e0;
26  border: 1px solid #2e2e32;
27  border-radius: 16px;
28  font-size: 12px;
29  font-weight: 400;
30  font-family: "Inter Variable", sans-serif;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 32px;
39  padding: 0px 12px;
40  background: transparent;
41  color: #8a8f98;
42  border: none;
43  border-radius: 9999px;
44  font-size: 13px;
45  font-weight: 400;
46  font-family: "Inter Variable", sans-serif;
47  cursor: pointer;
48}

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/linear.app/DESIGN.md

linear.app sitesindeki düğmeler