Stylepack

बटन

voiceflow.com के बटन

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

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

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

primary बटन

Get started
Hover
background #397dff → #2f68db, shadow deepens
Focus
outline 1px none rgb(255, 255, 255), offset 1px
Transition
all, 0.2s

secondary बटन

और जानें
Hover
background #397dff → #2f68db, shadow deepens
Transition
background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

ghost बटन

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

CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 10px 14px;
  background: #397dff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 0px;
  background: #ffffff;
  color: #1a1e23;
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 400;
  font-family: "UCity Pro", sans-serif;
  box-shadow: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 4px 12px;
  background: transparent;
  color: #515a63;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: "UCity Pro", sans-serif;
  cursor: pointer;
}

AI एजेंट के लिए

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

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

सवाल

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

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

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

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

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

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