جاري التحميل...

الأزرار في CSS

الأزرار هي عناصر «افعل ذلك» — أرسل، احفظ، التالي. يمكن لـ CSS أن يمنحها مظهراً واضحاً وتغذية راجعة صادقة عند التحويم أو الضغط أو التركيز أو التعطيل. أبقِ HTML دلالياً (button أو إدخال إرسال)؛ هذا الدرس عن المظهر والحالات.

مجموعة أدوات الزر

📊 الأزرار بنظرة واحدة

الجزء الدور اليومي
padding + background + border بناء وجه زر متين ومقروء
border-radius تليين الزوايا (أو شكل كبسولة بنصف قطر كبير)
:hover / :active إظهار «أنا تفاعلي» و«أنا مضغوط»
:focus-visible الإبقاء على حلقة تركيز لوحة المفاتيح مرئية
:disabled + cursor تخفيف الأزرار غير المتاحة؛ مؤشر يد عند القابلية للنقر

نسّق صنفاً مشتركاً .btn (أو button) مرة واحدة حتى تتماثل الإجراءات الأساسية في الصفحة. حشو حقول النص كان في الدرس السابق — هنا نلبس أهداف النقر.

زر أساسي متين

ابدأ بحشو مريح وخلفية واضحة ولون نص مقروء وborder-radius هادئ. فضّل font: inherit ليطابق الزر النص المجاور.

زر أساسي قاعدي

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover وactive — تغذية راجعة صادقة

يمكن لـ :hover أن يغمّق الوجه أو يفتحه قليلاً. يجب أن يشعر :active بالضغط — درجة أغمق أو إزاحة صغيرة — لا سمة نيون جديدة تماماً.

Hover وactive

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

تركيز تراه

لا تزِل أنماط التركيز دون بديل. :focus-visible يرسم حلقة واضحة لمستخدمي لوحة المفاتيح ويبقي نقر الفأرة هادئاً.

حلقة تركيز مرئية

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

الأزرار المعطّلة تبقى مرئية

يجب أن يبدو الزر المعطّل غير متاح — عتامة أقل أو ألوان هادئة — ويرفض مؤشر اليد. لا تُخفه من التخطيط.

نبرة disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

عادة زر هادئة

أبقِ مظهراً أساسياً واحداً، وhover/active واضحين، وحلقة تركيز مرئية، وdisabled هادئاً. يمكن لنسخ outline/ghost أن تشارك نفس الحشو ونصف القطر حتى تبدو المجموعة مترابطة.

مرافق outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

جرّب بنفسك

  1. نسّق button أساسياً بحشو وخلفية ولون نص وborder-radius.
  2. أغمق :hover وعمّق :active قليلاً.
  3. أضف outline لـ :focus-visible — لا outline: none عارياً.
  4. خفّف زراً :disabled وضع cursor: not-allowed.
  5. اختياري: أضف .btn-outline يشارك الحشو ونصف القطر.

أخطاء شائعة

  • outline: none دون بديل تركيز (يضيع مستخدمو لوحة المفاتيح)
  • حشو صغير يفشل أهداف اللمس على الجوال
  • تحويل هذا الدرس إلى تنسيق حقول النص (ذلك درس عناصر النماذج)
  • سمة نيون جامحة عند :hover تكسر هدوء العلامة
  • تنسيق روابط a فقط ونسيان عناصر button

خلاصة

  • الحشو والخلفية والحد ونصف القطر تبني وجه زر متين
  • :hover و:active يقدّمان تغذية راجعة صادقة
  • أبقِ حلقة :focus-visible مرئية
  • خفّف :disabled؛ استخدم cursor: pointer عند القابلية للنقر
  • اترك مظهر الحقول لدرس عناصر النماذج؛ هنا نلبس أهداف النقر

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 34 من 35
Css درس تعليمي