Stylepack

बटन

github.com के बटन

github.com का प्राइमरी बटन #08872b है, #ffffff टेक्स्ट, 6px कोनों और 48px ऊँचाई के साथ। नीचे: साइट का हर बटन वैरिएंट, उसकी hover और focus states, और वह CSS जिससे आपके बटन वैसे ही दिखें।

github.com से 4 दिन पहले मापा गया।

पूरा डिज़ाइन पैक खोलेंपैक डाउनलोड करें

primary बटन

Sign up for GitHub
Hover
background transparent → #ffffff29, border #262c28 → #ffffff1f
Focus
outline 2px solid rgb(48, 148, 255)
Transition
background-color, border-color, 0.2s, 0.2s

secondary बटन

Search/
Hover
background transparent → #ffffff29, border #262c28 → #ffffff1f
Transition
background-color, border-color, 0.2s, 0.2s

ghost बटन

साइन इन
Hover
कोई दिखने लायक बदलाव नहीं

CSS

हर वैरिएंट के लिए एक class, मापे गए मानों के साथ। फ़ॉन्ट वही है जो github.com अपने बटनों पर सेट करता है।

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 6px 20px;
  background: #08872b;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Mona Sans", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 1px 12px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #262c28;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Mona Sans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 5px 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  color: #000000;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Mona Sans", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

पैक सादा टेक्स्ट है, कोई key नहीं: DESIGN.md लाएँ, या पूरा पैक MCP सर्वर से Claude Code, Cursor या Copilot को दें।

curl -s https://stylepack.ai/packs/github.com/DESIGN.md

सवाल

github.com जैसे बटन कैसे बनाऊँ?

इस पेज की CSS इस्तेमाल करें: प्राइमरी बटन #08872b है, #ffffff टेक्स्ट, 6px कोने, 48px ऊँचाई। हर वैरिएंट के नीचे दिए hover और focus नियम जोड़ें और बटन का फ़ॉन्ट वही रखें जो github.com इस्तेमाल करता है।

github.com के बटन किस रंग के हैं?

github.com का प्राइमरी बटन #08872b है, #ffffff टेक्स्ट के साथ। साइट कुल 3 बटन वैरिएंट इस्तेमाल करती है; हर एक इस पेज पर अपने बैकग्राउंड, बॉर्डर, radius और साइज़ के साथ दिया है।

क्या कोई AI कोडिंग एजेंट github.com के बटन कॉपी कर सकता है?

हाँ। Stylepack से मिला github.com का डिज़ाइन पैक हर बटन वैरिएंट को उसकी states, फ़ॉन्ट, रंग और स्क्रीनशॉट के साथ रखता है, ताकि Claude Code, Cursor या Copilot वैसे ही बटन बना सकें।