Stylepack

Tombol

Tombol di headspace.com

Tombol utama di headspace.com berwarna #0061ef dengan teks #ffffff, sudut 32px, dan tinggi 48px. Di bawah ini: setiap varian tombol yang dipakai situs, state hover dan focus-nya, serta CSS agar tombol Anda tampil sama.

Diukur dari headspace.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

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

Tombol secondary

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

CSS-nya

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

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

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

Pertanyaan

Bagaimana cara membuat tombol seperti headspace.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #0061ef dengan teks #ffffff, sudut 32px, tinggi 48px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai headspace.com.

Apa warna tombol headspace.com?

Tombol utama di headspace.com berwarna #0061ef 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 headspace.com?

Bisa. Paket desain headspace.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.