Wie baue ich Buttons wie chatbase.co?

Nutze das CSS auf dieser Seite: Der primäre Button ist #000000 mit Text in #000000, Radius 9999px, 55px hoch. Ergänze die Hover- und Fokus-Regeln unter jeder Variante und setze die Button-Schrift auf die, die chatbase.co verwendet.

Welche Farbe haben die Buttons von chatbase.co?

Der primäre Button auf chatbase.co ist #000000 mit Text in #000000. Die Seite nutzt insgesamt 3 Button-Varianten; jede ist auf dieser Seite mit Hintergrund, Rahmen, Radius und Größe aufgeführt.

Kann ein KI-Coding-Agent die Buttons von chatbase.co nachbauen?

Ja. Das Designpaket von chatbase.co bei Stylepack enthält jede Button-Variante mit ihren Zuständen, die Schriften, die Farben und Screenshots, sodass Claude Code, Cursor oder Copilot passende Buttons bauen können.

chatbase.co Button-CSS: Buttons im gleichen Stil

Button primary

Loslegen

Hover: keine sichtbare Änderung
Fokus: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
Transition: background-color, color, border-color, box-shadow, 0.15s

Button secondary

Hover: keine sichtbare Änderung
Transition: background-color, color, border-color, box-shadow, 0.15s

Button ghost

Product

Hover: keine sichtbare Änderung

Das CSS

Eine Klasse pro Variante, mit den gemessenen Werten. Die Schrift ist die, die chatbase.co auf seinen Buttons setzt.

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}

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

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

Die Buttons von chatbase.co