टूल
किसी भी वेबसाइट का बटन CSS पाएँ
वेबसाइट का पता डालें और उसके बटनों की CSS पाएँ: हर वैरिएंट अपने बैकग्राउंड, टेक्स्ट के रंग, बॉर्डर, radius और साइज़ के साथ, और hover और focus भी।
airbnb.com
4 दिन पहले मापा गया।
.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;
}यह कैसे काम करता है
Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।
सवाल
कौन से बटन मापे जाते हैं?
पेज पर मिले प्राइमरी, सेकेंडरी और ghost वैरिएंट, हर एक सामान्य अवस्था में, hover पर और focus पर मापा गया। CSS में हर वैरिएंट के लिए एक class है, मापे गए मानों के साथ।
मेरा बटन अब भी अलग क्यों दिखता है?
बटन अपने फ़ॉन्ट पर निर्भर करते हैं: बटन का फ़ॉन्ट वही रखें जो साइट इस्तेमाल करती है (नतीजे में नाम दिया है) और पहले उसे, या उसके मुफ़्त स्टैंड-इन को, लोड करें। डिज़ाइन पैक में font stack और बाक़ी पूरा सिस्टम है।
क्या AI कोडिंग एजेंट इसे इस्तेमाल कर सकता है?
हाँ। CSS पेस्ट करें, या एजेंट को साइट का डिज़ाइन पैक दें: उसमें हर वैरिएंट अपनी states के साथ, रंग, टाइपोग्राफ़ी और मिलान के लिए स्क्रीनशॉट हैं।