chatbase.co gibi düğmeleri nasıl yaparım?

Bu sayfadaki CSS’i kullanın: birincil düğme #000000 zemin, #000000 metin, 9999px köşe, 55px yükseklikte. Her varyantın altında listelenen hover ve focus kurallarını ekleyin ve düğme fontunu chatbase.co sitesinin kullandığı fonta ayarlayın.

chatbase.co düğmeleri hangi renk?

chatbase.co sitesinin birincil düğmesi #000000 zemin üzerinde #000000 metin. Site toplam 3 düğme varyantı kullanıyor; her biri zemini, kenarlığı, köşe yarıçapı ve boyutuyla bu sayfada listelenmiş.

Bir yapay zeka kodlama ajanı chatbase.co düğmelerini kopyalayabilir mi?

Evet. Stylepack’teki chatbase.co tasarım paketi her düğme varyantını durumlarıyla, fontlarıyla, renkleriyle ve ekran görüntüleriyle içerir; böylece Claude Code, Cursor ya da Copilot aynı görünümde düğmeler kurabilir.

chatbase.co buton CSS: aynı düğmeleri siz de yapın

primary düğmesi

Başla

Hover: görünür değişiklik yok
Focus: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
Geçiş: background-color, color, border-color, box-shadow, 0.15s

secondary düğmesi

Hover: görünür değişiklik yok
Geçiş: background-color, color, border-color, box-shadow, 0.15s

ghost düğmesi

Product

Hover: görünür değişiklik yok

CSS

Her varyant için bir sınıf, ölçülen değerlerle. Font, chatbase.co sitesinin düğmelerinde kullandığı font.

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}

Yapay zeka ajanları için

Paket düz metindir, anahtar gerekmez: DESIGN.md dosyasını alın ya da tüm paketi MCP sunucusuyla Claude Code, Cursor veya Copilot'a verin.

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

chatbase.co sitesindeki düğmeler