Bagaimana cara membuat tombol seperti chatbase.co?

Pakai CSS di halaman ini: tombol utamanya berwarna #000000 dengan teks #000000, sudut 9999px, tinggi 55px. Tambahkan aturan hover dan focus yang tercantum di tiap varian, lalu atur font tombolnya ke font yang dipakai chatbase.co.

Apa warna tombol chatbase.co?

Tombol utama di chatbase.co berwarna #000000 dengan teks #000000. Situs ini memakai 3 varian tombol secara keseluruhan; masing-masing tercantum di halaman ini beserta latar, border, radius, dan ukurannya.

Bisakah AI coding agent meniru tombol chatbase.co?

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

CSS tombol chatbase.co: buat tombol seperti miliknya

Tombol primary

Mulai sekarang

Hover: tidak ada perubahan terlihat
Focus: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
Transisi: background-color, color, border-color, box-shadow, 0.15s

Tombol secondary

Hover: tidak ada perubahan terlihat
Transisi: background-color, color, border-color, box-shadow, 0.15s

Tombol ghost

Product

Hover: tidak ada perubahan terlihat

CSS-nya

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 55px;
6  padding: 0px 0px;
7  background: #000000;
8  color: #000000;
9  border: none;
10  border-radius: 9999px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Geist", sans-serif;
14  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 36px;
23  padding: 8px 16px;
24  background: linear-gradient(0deg, rgba(228, 228, 231, 0) 50%, rgba(228, 228, 231, 0.2) 100%);
25  color: #000000;
26  border: 1px solid transparent;
27  border-radius: 8px;
28  font-size: 14px;
29  font-weight: 500;
30  font-family: "Geist", sans-serif;
31  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 36px;
40  padding: 8px 12px;
41  background: transparent;
42  color: #000000;
43  border: none;
44  border-radius: 8px;
45  font-size: 14px;
46  font-weight: 400;
47  font-family: "Geist", sans-serif;
48  cursor: pointer;
49}

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/chatbase.co/DESIGN.md

Tombol di chatbase.co