Stylepack

Düğmeler

apple.com sitesindeki düğmeler

apple.com sitesinin birincil düğmesi #0071e3 zemin, #ffffff metin, 980px köşe ve 44px 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.

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

Tam tasarım paketini açPaketi indir

primary düğmesi

Learn more
Hover
background #0071e3 → #0076df
Focus
outline 2px solid rgb(0, 113, 227), offset 3px
Geçiş
all, 0s

secondary düğmesi

Shop
Hover
background transparent → #0076df, text #2997ff → #ffffff, border #2997ff → transparent
Geçiş
all, 0s

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: #0071e3;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: transparent;
  color: #2997ff;
  border: 1px solid #2997ff;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", 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/apple.com/DESIGN.md

Sorular

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

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

apple.com düğmeleri hangi renk?

apple.com sitesinin birincil düğmesi #0071e3 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ı apple.com düğmelerini kopyalayabilir mi?

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