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

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

github.com düğmeleri hangi renk?

github.com sitesinin birincil düğmesi #08872b 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ı github.com düğmelerini kopyalayabilir mi?

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

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

primary düğmesi

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Focus: outline 2px solid rgb(48, 148, 255)
Geçiş: background-color, border-color, 0.2s, 0.2s

secondary düğmesi

Search/

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
Geçiş: background-color, border-color, 0.2s, 0.2s

ghost düğmesi

Giriş yap

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

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, github.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: 48px;
6  padding: 6px 20px;
7  background: #08872b;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Mona Sans", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 32px;
22  padding: 1px 12px;
23  background: transparent;
24  color: #ffffff;
25  border: 1px solid #262c28;
26  border-radius: 6px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Mona Sans", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 5px 5px;
39  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 600;
45  font-family: "Mona Sans", 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/github.com/DESIGN.md

github.com sitesindeki düğmeler