Stylepack

बटन

sweetgreen.com के बटन

sweetgreen.com का प्राइमरी बटन #00473c है, #e6ff55 टेक्स्ट, 9999px कोनों और 30px ऊँचाई के साथ। नीचे: साइट का हर बटन वैरिएंट, उसकी hover और focus states, और वह CSS जिससे आपके बटन वैसे ही दिखें।

sweetgreen.com से 32 दिन पहले मापा गया।

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

primary बटन

Order
Hover
background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Focus
border → #0e150e50
Transition
all, 0.3s

secondary बटन

Order now
Hover
background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7
Transition
all, 0.3s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 7px 16px;
  background: #00473c;
  color: #e6ff55;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Grenette", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 15px 60px;
  background: #e6ff55;
  color: #00473c;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Grenette", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0px 0px;
  background: transparent;
  color: #0e150e;
  border: none;
  border-radius: 4px;
  font-size: 48px;
  font-weight: 200;
  font-family: "Grenette", sans-serif;
  text-transform: capitalize;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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