Stylepack

Tombol

Tombol di causal.so

Tombol utama di causal.so berwarna #1a1a1a dengan teks #f9f9f9, sudut 100px, dan tinggi 36px. Di bawah ini: setiap varian tombol yang dipakai situs, state hover dan focus-nya, serta CSS agar tombol Anda tampil sama.

Diukur dari causal.so 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

Start for free
Hover
tidak ada perubahan terlihat
Focus
outline 2px solid rgb(26, 26, 26), offset 2px
Transisi
color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, 0.3s

Tombol ghost

Solutions
Hover
tidak ada perubahan terlihat

CSS-nya

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 14px;
  background: #1a1a1a;
  color: #f9f9f9;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Manrope Variable", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0px 0px;
  background: transparent;
  color: #878787;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Manrope Variable", 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/causal.so/DESIGN.md

Pertanyaan

Bagaimana cara membuat tombol seperti causal.so?

Pakai CSS di halaman ini: tombol utamanya berwarna #1a1a1a dengan teks #f9f9f9, sudut 100px, tinggi 36px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai causal.so.

Apa warna tombol causal.so?

Tombol utama di causal.so berwarna #1a1a1a dengan teks #f9f9f9. 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 causal.so?

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