बटन
chatbase.co के बटन
chatbase.co का प्राइमरी बटन #000000 है, #000000 टेक्स्ट, 9999px कोनों और 55px ऊँचाई के साथ। नीचे: साइट का हर बटन वैरिएंट, उसकी hover और focus states, और वह CSS जिससे आपके बटन वैसे ही दिखें।
chatbase.co से 4 दिन पहले मापा गया।
primary बटन
- Hover
- कोई दिखने लायक बदलाव नहीं
- Focus
- outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px
- Transition
- background-color, color, border-color, box-shadow, 0.15s
secondary बटन
- Hover
- कोई दिखने लायक बदलाव नहीं
- Transition
- background-color, color, border-color, box-shadow, 0.15s
ghost बटन
- Hover
- कोई दिखने लायक बदलाव नहीं
CSS
हर वैरिएंट के लिए एक class, मापे गए मानों के साथ। फ़ॉन्ट वही है जो chatbase.co अपने बटनों पर सेट करता है।
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 55px;
padding: 0px 0px;
background: #000000;
color: #000000;
border: none;
border-radius: 9999px;
font-size: 16px;
font-weight: 400;
font-family: "Geist", sans-serif;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 8px 16px;
background: linear-gradient(0deg, rgba(228, 228, 231, 0) 50%, rgba(228, 228, 231, 0.2) 100%);
color: #000000;
border: 1px solid transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
font-family: "Geist", sans-serif;
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;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 8px 12px;
background: transparent;
color: #000000;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 400;
font-family: "Geist", sans-serif;
cursor: pointer;
}AI एजेंट के लिए
पैक सादा टेक्स्ट है, कोई key नहीं: DESIGN.md लाएँ, या पूरा पैक MCP सर्वर से Claude Code, Cursor या Copilot को दें।
curl -s https://stylepack.ai/packs/chatbase.co/DESIGN.mdसवाल
chatbase.co जैसे बटन कैसे बनाऊँ?
इस पेज की CSS इस्तेमाल करें: प्राइमरी बटन #000000 है, #000000 टेक्स्ट, 9999px कोने, 55px ऊँचाई। हर वैरिएंट के नीचे दिए hover और focus नियम जोड़ें और बटन का फ़ॉन्ट वही रखें जो chatbase.co इस्तेमाल करता है।
chatbase.co के बटन किस रंग के हैं?
chatbase.co का प्राइमरी बटन #000000 है, #000000 टेक्स्ट के साथ। साइट कुल 3 बटन वैरिएंट इस्तेमाल करती है; हर एक इस पेज पर अपने बैकग्राउंड, बॉर्डर, radius और साइज़ के साथ दिया है।
क्या कोई AI कोडिंग एजेंट chatbase.co के बटन कॉपी कर सकता है?
हाँ। Stylepack से मिला chatbase.co का डिज़ाइन पैक हर बटन वैरिएंट को उसकी states, फ़ॉन्ट, रंग और स्क्रीनशॉट के साथ रखता है, ताकि Claude Code, Cursor या Copilot वैसे ही बटन बना सकें।