Stylepack

बटन

airbnb.com के बटन

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

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

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

secondary बटन

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

ghost बटन

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

CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0px 16px;
  background: #ffffff4d;
  color: #000000;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Airbnb Cereal VF", sans-serif;
  box-shadow: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 11px 12px;
  background: transparent;
  color: #222222;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Airbnb Cereal VF", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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