How do I make buttons like chatbase.co?

Use the CSS on this page: the primary button is #000000 with #000000 text, 9999px corners, 55px tall. Add the hover and focus rules listed under each variant and set the button font to the one chatbase.co uses.

What color are the chatbase.co buttons?

The primary button on chatbase.co is #000000 with #000000 text. The site uses 3 button variants in total; each one is listed on this page with its background, border, radius and size.

Can an AI coding agent copy the chatbase.co buttons?

Yes. The chatbase.co design pack from Stylepack holds every button variant with its states, the fonts, the colors and screenshots, so Claude Code, Cursor or Copilot can build buttons that match.

chatbase.co button CSS: make buttons like theirs

primary button

Get started

Hover: no visible change
Focus: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
Transition: background-color, color, border-color, box-shadow, 0.15s

secondary button

Hover: no visible change
Transition: background-color, color, border-color, box-shadow, 0.15s

ghost button

Product

Hover: no visible change

The CSS

One class per variant, with the measured values. The font is the one chatbase.co sets on its buttons.

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}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/chatbase.co/DESIGN.md

The buttons on chatbase.co