Stylepack

Tombol

Tombol di tailwindcss.com

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

Diukur dari tailwindcss.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Tombol primary

Get started
Hover
tidak ada perubahan terlihat
Focus
outline 1px auto rgb(16, 16, 16), offset 1px
Transisi
all, 0s

Tombol ghost

v4.3
Hover
tidak ada perubahan terlihat

CSS-nya

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 2px 6px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: "inter", 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/tailwindcss.com/DESIGN.md

Pertanyaan

Bagaimana cara membuat tombol seperti tailwindcss.com?

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

Apa warna tombol tailwindcss.com?

Tombol utama di tailwindcss.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 tailwindcss.com?

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