Stylepack

बटन

resend.com के बटन

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

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

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

primary बटन

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

secondary बटन

Log in
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.2s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 12px 20px;
  background: #00a3ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  background: transparent;
  color: #a1a4a5;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 4px 12px;
  background: transparent;
  color: #a1a4a5;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  font-family: "inter", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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