Stylepack

Düğmeler

gitnimble.com sitesindeki düğmeler

gitnimble.com sitesinin birincil düğmesi #f2f3f5 zemin, #8a8d94 metin, 9999px köşe ve 32px yükseklikte. Aşağıda: sitenin kullandığı her düğme varyantı, hover ve focus durumları ve sizinkini aynı görünüme kavuşturacak CSS.

gitnimble.com sitesinden 4 gün önce ölçüldü.

Tam tasarım paketini açPaketi indir

secondary düğmesi

Daha fazla bilgi
Hover
background color(display-p3 0 0.357 1) → #0049cc, shadow added (color(srgb -0.166327 0.364166 1.03865 / 0.24) 0px 16px 40px )
Geçiş
background, border-color, color, transform, box-shadow, 0.15s, 0.15s, 0.15s, 0.15s, 0.2s

ghost düğmesi

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

CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 0px;
  background: #f2f3f5;
  color: #8a8d94;
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0px 16px;
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 540;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}

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/gitnimble.com/DESIGN.md

Sorular

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

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

gitnimble.com düğmeleri hangi renk?

gitnimble.com sitesinin birincil düğmesi #f2f3f5 zemin üzerinde #8a8d94 metin. Site toplam 2 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

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

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