كيف أصنع أزرارًا مثل voiceflow.com؟

استخدم كود CSS في هذه الصفحة: الزر الأساسي لونه #397dff بنص #ffffff، وزواياه 8px، وارتفاعه 37px. أضف قواعد hover والتركيز المذكورة تحت كل نوع، واضبط خط الزر على الخط الذي يستخدمه voiceflow.com.

ما لون أزرار voiceflow.com؟

الزر الأساسي في voiceflow.com لونه #397dff بنص #ffffff. يستخدم الموقع 3 أنواع من الأزرار في المجموع؛ كل نوع مذكور في هذه الصفحة بخلفيته وحدوده واستدارته وحجمه.

هل يستطيع وكيل برمجة بالذكاء الاصطناعي نسخ أزرار voiceflow.com؟

نعم. تحتوي حزمة تصميم voiceflow.com من Stylepack على كل أنواع الأزرار بحالاتها والخطوط والألوان ولقطات الشاشة، فيستطيع Claude Code أو Cursor أو Copilot بناء أزرار مطابقة.

CSS أزرار voiceflow.com: اصنع أزرارًا مثل أزرارهم

زر primary

Get started

Hover: background #397dff → #2f68db, shadow deepens
التركيز: outline 1px none rgb(255, 255, 255), offset 1px
الانتقال: all, 0.2s

زر secondary

اعرف المزيد

Hover: background #397dff → #2f68db, shadow deepens
الانتقال: background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

زر ghost

Resources

Hover: لا تغيير مرئي

كود CSS

فئة واحدة لكل نوع، بالقيم المقاسة. الخط هو الذي يستخدمه voiceflow.com في أزراره.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 37px;
6  padding: 10px 14px;
7  background: #397dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 8px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "UCity Pro", sans-serif;
14  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;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 0px 0px;
24  background: #ffffff;
25  color: #1a1e23;
26  border: none;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "UCity Pro", sans-serif;
31  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;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 33px;
40  padding: 4px 12px;
41  background: transparent;
42  color: #515a63;
43  border: none;
44  border-radius: 0px;
45  font-size: 14px;
46  font-weight: 400;
47  font-family: "UCity Pro", sans-serif;
48  cursor: pointer;
49}

لوكلاء الذكاء الاصطناعي

الحزمة نص عادي بلا مفتاح: اجلب DESIGN.md، أو سلّم الحزمة كاملة إلى Claude Code أو Cursor أو Copilot عبر خادم MCP.

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