Jak zrobić przyciski jak na chatbase.co?

Użyj CSS z tej strony: główny przycisk ma tło #000000, tekst #000000, zaokrąglenie 9999px i wysokość 55px. Dodaj reguły hover i focus wypisane pod każdym wariantem i ustaw na przycisku czcionkę, której używa chatbase.co.

Jakiego koloru są przyciski chatbase.co?

Główny przycisk na chatbase.co ma tło #000000 i tekst #000000. Strona używa łącznie 3 wariantów przycisków; każdy jest wypisany na tej stronie ze swoim tłem, obramowaniem, zaokrągleniem i rozmiarem.

Czy agent AI do kodowania może skopiować przyciski chatbase.co?

Tak. Pakiet designu chatbase.co ze Stylepack zawiera każdy wariant przycisku z jego stanami, czcionki, kolory i zrzuty ekranu, więc Claude Code, Cursor lub Copilot może zbudować pasujące przyciski.

CSS przycisków chatbase.co: zrób takie same przyciski

Przycisk primary

Zacznij

Hover: brak widocznej zmiany
Focus: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
Przejście: background-color, color, border-color, box-shadow, 0.15s

Przycisk secondary

Hover: brak widocznej zmiany
Przejście: background-color, color, border-color, box-shadow, 0.15s

Przycisk ghost

Product

Hover: brak widocznej zmiany

CSS

Jedna klasa na wariant, ze zmierzonymi wartościami. Czcionka to ta, którą chatbase.co ustawia na swoich przyciskach.

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}

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

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

Przyciski na chatbase.co