Stylepack

Düğmeler

wearebou.com sitesindeki düğmeler

wearebou.com sitesinin birincil düğmesi #0a0a0a zemin, #ffffff metin, 9999px köşe ve 39px 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.

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

Tam tasarım paketini açPaketi indir

primary düğmesi

Read full case
Hover
görünür değişiklik yok

secondary düğmesi

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 10.4px 17.6px;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 300;
  font-family: "StabilGrotesk", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 4px 14px;
  background: #ffffff40;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  font-family: "StabilGrotesk", sans-serif;
  text-transform: uppercase;
  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/wearebou.com/DESIGN.md

Sorular

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

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

wearebou.com düğmeleri hangi renk?

wearebou.com sitesinin birincil düğmesi #0a0a0a zemin üzerinde #ffffff 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ı wearebou.com düğmelerini kopyalayabilir mi?

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