Stylepack

Tombol

Tombol di figma.com

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

Diukur dari figma.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

Get started for free
Hover
background #000000 → oklch(0 0 none / 0.85)
Focus
outline 2px dashed rgb(0, 0, 0), offset 4px
Transisi
background, box-shadow, 0.18s, 0.18s

Tombol ghost

Contact sales
Hover
tidak ada perubahan terlihat

CSS-nya

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 330;
  font-family: "figmaSans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: "figmaSans", sans-serif;
  box-shadow: oklch(0 0 none / 0.16) 0px 0px 0px 1px inset;
  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/figma.com/DESIGN.md

Pertanyaan

Bagaimana cara membuat tombol seperti figma.com?

Pakai CSS di halaman ini: tombol utamanya berwarna #000000 dengan teks #ffffff, sudut 8px, tinggi 46px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai figma.com.

Apa warna tombol figma.com?

Tombol utama di figma.com berwarna #000000 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 figma.com?

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