نظام الأزرار

ثلاث صيغ دلالية. حجمان. صفر استثناءات. الأزرار واعية بالحالة — الشكل البصري يطابق الوزن التجاري للفعل.

الصيغ

.btn-hero

الـ CTA الأساسي. برتقالي ممتلئ. محجوز للفعل الأهم في السطح (Apply, Submit, Subscribe). كحدّ أقصى واحد لكل كتلة مرئية.

.btn-outline

CTA ثانوي. حدّ بنفسجي 1px، خلفية شفافة، نص بنفسجي. View, Read more, See details.

.btn-default

فعل أداة محايد. حدّ border-border بـ 1px، خلفية الكرت. للفلاتر، "اعرض المزيد"، الأفعال غير التجارية بين السطور.

الأحجام

.btn-md (افتراضي)

40-44px ارتفاعاً. استخدمه في كل مكان إلا إذا كان لديك سبب محدّد للأصغر.

.btn-sm

32-36px ارتفاعاً. داخل الكروت، شرائط الفلاتر، والشبكات الضيّقة.

.btn-lg

52px ارتفاعاً. محجوز لـ hero CTAs فقط. اثنان كحدّ أقصى لكل صفحة.

أنماط أزرار ممنوعة

• لا أزرار خضراء / زرقاء / حمراء. الحالة تُنقَل بالشارات، لا بلون الزر.
• لا ظلال 3D، ولا highlight inset، ولا glassmorphism.
• لا أزرار بتدرّجات لونية خارج صيغة بانر الراعي المعتمدة صراحةً.
• لا أزرار rounded-full pill في الـ chrome التحريري (محجوزة لشارات الفلاتر والشارات).