Stylepack

बटन

canva.com के बटन

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

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

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

primary बटन

Start designing for free
Hover
background #ffffffe5 → #ffffff
Focus
outline 1px auto rgb(238, 238, 238), offset 1px
Transition
background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

secondary बटन

Log in
Hover
background #ffffffe5 → #ffffff
Transition
background-color, box-shadow, color, transform, 0.1s, 0.1s, 0.1s, 0.07s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  background: #8b3dff;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Canva Sans", sans-serif;
  box-shadow: rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0px 12px;
  background: #ffffffe5;
  color: #0f1015;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Canva Sans", sans-serif;
  box-shadow: rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 4px 8px;
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 13.3333px;
  font-weight: 400;
  font-family: "Canva Sans", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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