Stylepack

बटन

monzo.com के बटन

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

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

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

primary बटन

Sign up
Hover
background #091723 → #2c3a43, border #091723 → #2c3a43
Focus
outline 1px solid rgb(33, 143, 183), offset 2px
Transition
background-color, color, 0.3s, 0.3s

secondary बटन

Open a free Monzo accoun
Hover
background #ffffff → #ffffffcc, border #ffffff → #ffffffcc
Transition
background-color, 0.2s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  padding: 12px 24px;
  background: #091723;
  color: #ffffff;
  border: 1px solid #091723;
  border-radius: 500px;
  font-size: 16px;
  font-weight: 600;
  font-family: "MonzoSansText", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 12px 24px;
  background: #ffffff;
  color: #091723;
  border: 1px solid #ffffff;
  border-radius: 500px;
  font-size: 16px;
  font-weight: 600;
  font-family: "MonzoSansText", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0px 0px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 0px;
  font-size: 0px;
  font-weight: 400;
  font-family: "MonzoSansText", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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