Stylepack

बटन

headspace.com के बटन

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

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

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

primary बटन

Try for free
Hover
background #0061ef → #0040ea
Focus
outline 2px solid rgb(0, 64, 234), offset 1px
Transition
color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

secondary बटन

Try for $0
Hover
background #2d2c2b → #141313
Transition
color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14.3px 24px;
  background: #0061ef;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Headspace Apercu", sans-serif;
  box-shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 20px;
  background: #2d2c2b;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Headspace Apercu", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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