Stylepack

बटन

dropbox.com के बटन

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

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

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

primary बटन

Get started
Hover
background #0061fe → #0057e5
Focus
box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transition
background-color, border-color, 0.1s, 0.1s

secondary बटन

Try Dropbox free
Hover
background #0061fe → #0057e5
Transition
background-color, border-color, 0.1s, 0.1s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 12px;
  background: #0061fe;
  color: #f7f5f2;
  border: 2px solid #0061fe;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 16px 24px;
  background: transparent;
  color: #1e1919;
  border: 2px solid #1e1919;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 16px 12px;
  background: transparent;
  color: #1e1919;
  border: none;
  border-radius: 0px;
  font-size: 13.3333px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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