Stylepack

बटन

figma.com के बटन

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

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

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

primary बटन

Get started for free
Hover
background #000000 → oklch(0 0 none / 0.85)
Focus
outline 2px dashed rgb(0, 0, 0), offset 4px
Transition
background, box-shadow, 0.18s, 0.18s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 330;
  font-family: "figmaSans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: "figmaSans", sans-serif;
  box-shadow: oklch(0 0 none / 0.16) 0px 0px 0px 1px inset;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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