Stylepack

Tombol

Tombol di apple.com

Tombol utama di apple.com berwarna #0071e3 dengan teks #ffffff, sudut 980px, dan tinggi 44px. Di bawah ini: setiap varian tombol yang dipakai situs, state hover dan focus-nya, serta CSS agar tombol Anda tampil sama.

Diukur dari apple.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

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

Tombol secondary

Shop
Hover
background transparent → #0076df, text #2997ff → #ffffff, border #2997ff → transparent
Transisi
all, 0s

CSS-nya

Satu class per varian, dengan nilai hasil pengukuran. Fontnya adalah font yang dipakai apple.com pada tombolnya.

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;
}

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

curl -s https://stylepack.ai/packs/apple.com/DESIGN.md

Pertanyaan

Bagaimana cara membuat tombol seperti apple.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #0071e3 dengan teks #ffffff, sudut 980px, tinggi 44px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai apple.com.

Apa warna tombol apple.com?

Tombol utama di apple.com berwarna #0071e3 dengan teks #ffffff. Situs ini memakai 2 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol apple.com?

Bisa. Paket desain apple.com dari Stylepack memuat setiap varian tombol beserta state-nya, font, warna, dan screenshot, sehingga Claude Code, Cursor, atau Copilot bisa membuat tombol yang serupa.