टूल

किसी भी वेबसाइट का बटन CSS पाएँ

वेबसाइट का पता डालें और उसके बटनों की CSS पाएँ: हर वैरिएंट अपने बैकग्राउंड, टेक्स्ट के रंग, बॉर्डर, radius और साइज़ के साथ, और hover और focus भी।

आज़माएँstripe.comlinear.appairbnb.com

stripe.com

4 दिन पहले मापा गया।

Contact salesSign inProducts
buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 11.5px 20px;
  background: #533afd;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10.5px 20px;
  background: transparent;
  color: #533afd;
  border: 1px solid #ffffff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 0px;
  background: transparent;
  color: #061b31;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "sohne-var", sans-serif;
  cursor: pointer;
}

यह कैसे काम करता है

Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।

सवाल

कौन से बटन मापे जाते हैं?

पेज पर मिले प्राइमरी, सेकेंडरी और ghost वैरिएंट, हर एक सामान्य अवस्था में, hover पर और focus पर मापा गया। CSS में हर वैरिएंट के लिए एक class है, मापे गए मानों के साथ।

मेरा बटन अब भी अलग क्यों दिखता है?

बटन अपने फ़ॉन्ट पर निर्भर करते हैं: बटन का फ़ॉन्ट वही रखें जो साइट इस्तेमाल करती है (नतीजे में नाम दिया है) और पहले उसे, या उसके मुफ़्त स्टैंड-इन को, लोड करें। डिज़ाइन पैक में font stack और बाक़ी पूरा सिस्टम है।

क्या AI कोडिंग एजेंट इसे इस्तेमाल कर सकता है?

हाँ। CSS पेस्ट करें, या एजेंट को साइट का डिज़ाइन पैक दें: उसमें हर वैरिएंट अपनी states के साथ, रंग, टाइपोग्राफ़ी और मिलान के लिए स्क्रीनशॉट हैं।