Stylepack

बटन

stripe.com के बटन

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

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

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

primary बटन

Contact sales
Hover
background #533afd → #4032c8
Focus
outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Transition
color, background-color, border-color, 0.24s, 0.24s, 0.24s

secondary बटन

Sign in
Hover
background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Transition
color, background-color, border-color, 0.24s, 0.24s, 0.24s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 11.5px 20px;
  background: #533afd;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10.5px 20px;
  background: transparent;
  color: #533afd;
  border: 1px solid #ffffff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 0px;
  background: transparent;
  color: #061b31;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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