Stylepack

बटन

mercury.com के बटन

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

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

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

primary बटन

Open account
Hover
कोई दिखने लायक बदलाव नहीं
Focus
outline 2px solid rgb(156, 180, 232), offset 4px
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

secondary बटन

Launch demo
Hover
कोई दिखने लायक बदलाव नहीं
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #5266eb;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #afb2ce33;
  color: #ededf3;
  border: 1px solid #afb2ce5c;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: transparent;
  color: #ededf3;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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