Stylepack

Düğmeler

headspace.com sitesindeki düğmeler

headspace.com sitesinin birincil düğmesi #0061ef zemin, #ffffff metin, 32px köşe ve 48px 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.

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

Tam tasarım paketini açPaketi indir

primary düğmesi

Try for free
Hover
background #0061ef → #0040ea
Focus
outline 2px solid rgb(0, 64, 234), offset 1px
Geçiş
color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

secondary düğmesi

Try for $0
Hover
background #2d2c2b → #141313
Geçiş
color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14.3px 24px;
  background: #0061ef;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Headspace Apercu", sans-serif;
  box-shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 20px;
  background: #2d2c2b;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Headspace Apercu", 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/headspace.com/DESIGN.md

Sorular

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

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

headspace.com düğmeleri hangi renk?

headspace.com sitesinin birincil düğmesi #0061ef 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ı headspace.com düğmelerini kopyalayabilir mi?

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