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

استخدم كود CSS في هذه الصفحة: الزر الأساسي لونه #08872b بنص #ffffff، وزواياه 6px، وارتفاعه 48px. أضف قواعد hover والتركيز المذكورة تحت كل نوع، واضبط خط الزر على الخط الذي يستخدمه github.com.

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

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

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

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

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

زر primary

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
التركيز: outline 2px solid rgb(48, 148, 255)
الانتقال: background-color, border-color, 0.2s, 0.2s

زر secondary

Search/

Hover: background transparent → #ffffff29, border #262c28 → #ffffff1f
الانتقال: background-color, border-color, 0.2s, 0.2s

زر ghost

تسجيل الدخول

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

كود CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 48px;
6  padding: 6px 20px;
7  background: #08872b;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Mona Sans", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 32px;
22  padding: 1px 12px;
23  background: transparent;
24  color: #ffffff;
25  border: 1px solid #262c28;
26  border-radius: 6px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Mona Sans", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 5px 5px;
39  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 600;
45  font-family: "Mona Sans", sans-serif;
46  cursor: pointer;
47}

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

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

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