Stylepack

बटन

notion.com के बटन

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

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

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

primary बटन

Get Notion free
Hover
background #0075de → #005bab
Focus
outline 2px solid rgba(0, 117, 222, 0.925), offset 2px
Transition
all, 0s

secondary बटन

Request a demo
Hover
background #0075de → #005bab
Transition
background-color, color, 0.2s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 4px 14px;
  background: #0075de;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: "NotionInter", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 6px 15px;
  background: #e6f3fe;
  color: #005bab;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: "NotionInter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 5px 10px;
  background: transparent;
  color: #000000e5;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  font-family: "NotionInter", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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