Stylepack

बटन

openai.com के बटन

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

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

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

primary बटन

Try ChatGPT(opens in a n
Hover
कोई दिखने लायक बदलाव नहीं
Focus
outline 1px none rgba(0, 0, 0, 0.486), offset 2px
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

secondary बटन

Learn about ChatGPT Busi
Hover
कोई दिखने लायक बदलाव नहीं
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.25s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 20px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  font-family: "OpenAI Sans", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 12px;
  background: transparent;
  color: #000000;
  border: 1px solid #0000001f;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: "OpenAI Sans", 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.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0px 16px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 0px;
  font-size: 17px;
  font-weight: 400;
  font-family: "OpenAI Sans", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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