منشئ أزرار CSS
أنشئ زرا وعاين حالاته الافتراضية وعند مرور المؤشر وتركيز لوحة المفاتيح والضغط والتعطيل والتحميل قبل استخدامه. اختر تعبئة بلون ثابت أو تدرج ثنائي اللون، وحدودا ومسافات وزوايا وظلا وألوانا لكل حالة. يحوّل المنشئ نص الزر إلى صيغة HTML آمنة، ويبقي التصميم داخل متصفحك، وينتج HTML دلاليا وCSS ضمن حدود مدروسة.
كيفية إنشاء زر CSS
-
1
اكتب نص الزر
أدخل نصا عاديا للاسم الظاهر على الزر. تُحفظ المحارف الشبيهة بـ HTML كنص ولا يجري تنفيذها.
-
2
اضبط التصميم الأساسي
اختر خلفية ثابتة أو متدرجة، وألوان النص والحدود، والحجم، والحشو، ونصف قطر الزوايا، والظل.
-
3
حدّد حالات التفاعل
اضبط ألوان وحركة المرور بالمؤشر والضغط والتركيز. تضاف قواعد التعطيل والتحميل تلقائيا.
-
4
راجع الإرشادات
تحقق من أدنى تباين للنص وتباين مؤشر التركيز والحد الأدنى المفروض لحجم الهدف قبل التصدير.
-
5
انسخ أو نزّل
انسخ HTML وCSS الآمنين معا، أو نزّل معاينة HTML مستقلة بترميز UTF-8.
ما الذي يتضمنه الكود المنشأ؟
يستخدم HTML عنصرا حقيقيا من نوع <button type="button"> ويضع النص الظاهر داخل عنصر span. يغطي CSS ست حالات مفيدة:
- الافتراضية للمظهر العادي قبل التفاعل
- مرور المؤشر للأجهزة التي تستخدم مؤشرا
- تركيز لوحة المفاتيح عبر
:focus-visible - الضغط أثناء الضغط على الزر
- التعطيل عبر الخاصية الأصلية
disabled - التحميل عبر
aria-busy="true"
يظل تطبيقك مسؤولا عن تحديد وقت تعطيل الزر أو انشغاله. يوفّر المنشئ قواعد العرض فقط، ولا ينشئ حالة داخل التطبيق ولا يربط إجراء للنقر.
إرشادات التباين فحص وليست شهادة
يحسب المحرر أدنى تباين للنص بين اللون الأساسي وطرف التدرج ولوني المرور والضغط. يستخدم 4.5:1 هدفا للنص العادي. ويقارن أيضا إطار التركيز بسطح المعاينة الفاتح مستخدما 3:1 هدفا للعناصر غير النصية.
تساعد هذه الأرقام على اكتشاف المشكلات الشائعة، لكن الصفحة النهائية قد تضع الزر على سطح مختلف. أعد فحص تباين التركيز والحدود ضمن التخطيط الفعلي. تظهر الأزرار المعطلة بشفافية منخفضة، وينبغي توفير شرح واضح بجانبها إذا لم يكن سبب التعطيل بديهيا.
حجم الهدف والحركة
تفرض القاعدة المصدّرة حدا أدنى قدره 44 px للعرض والارتفاع. وهو حجم مريح لكثير من واجهات اللمس، وأكبر من الحد الأدنى البالغ 24 CSS px في معيار النجاح 2.5.8 من WCAG 2.2. مع ذلك، يجب مراعاة التخطيط والمسافات والاستثناءات وإرشادات المنصة في المنتج النهائي.
تزال حركة المرور والضغط عندما يطلب المستخدم تقليل الحركة. يبطؤ مؤشر التحميل بدلا من الاختفاء حتى تبقى حالة الانشغال واضحة.
حدود الإخراج الآمن
يطبّع النص الظاهر ويُقصر على 120 مجموعة محارف، وتزال منه محارف التحكم غير المرئية في اتجاه الكتابة، ثم يحوّل إلى HTML آمن في المقتطف والملف المنزّل. يجب أن تكون الألوان قيما سداسية من ست خانات. تُقرّب كل قيمة رقمية وتُحصر في النطاق الموضح بجانب عنصر التحكم.
يعمل المحرر الكامل في ذاكرة المتصفح. في المسار الاختياري المؤلف من أربع صفحات، يُحفظ تصميم بإصدار محدد في sessionStorage للتبويب الحالي. لا توضع تسمية الزر أو قيم التصميم في عناوين URL للمسار ولا ترسل عبر خوادمنا.
استخدام حالة التحميل
أضف سمة الانشغال وأزلها من كود التطبيق:
<button type="button" class="generated-button" aria-busy="true" disabled>
<span class="generated-button__label">جار الحفظ</span>
</button>
تخبر aria-busy تقنيات المساعدة بأن التحديث جار. أضف disabled أيضا عندما يلزم منع التفعيل المتكرر. عند انتهاء العملية، أزل السمتين وانقل أي رسالة نجاح أو خطأ مهمة إلى منطقة حالة مناسبة.
الأسئلة الشائعة
لا. يوفّر حسابات للتباين وقاعدة تركيز ظاهرة ومعالجة لتقليل الحركة وHTML دلاليا وحدا أدنى للهدف قدره 44 px. يعتمد التوافق على الصفحة النهائية والألوان المحيطة والمحتوى والسلوك والاختبار.
لا. يحتفظ المحرر بالنص والتصميم في ذاكرة المتصفح. يستخدم المسار الاختياري متعدد الصفحات تخزين الجلسة في التبويب نفسه، ولا يضع القيم التي أدخلتها في عنوان URL أو طلبات خوادمنا.
الزر مناسب لإجراءات مثل الإرسال أو الفتح أو التبديل. استخدم رابطا يتضمن href حقيقيا للتنقل، ثم طبّق الفئة المنشأة عليه إذا أردت أن يشارك الزر الشكل نفسه.
يعرض المحرر رسالة خطأ ويبقي الإخراج كاملا ومحددا في حقل نصي واضح لتتمكن من نسخه يدويا. ولا يعرض النجاح إلا بعد اكتمال Clipboard API.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول Base64 إلى Hex
حوّل سلسلة Base64 إلى بايتاتها الأساسية معروضة بالنظام الست عشري (hex). مفيد لفحص الرموز المميزة والمفاتيح والشهادات ورموز JWT.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم bytes بالنظام الست عشري. يستخدم الناتج رقمين hex لكل محرف، جاهزا لملفات memory dumps أو packet traces أو جداول firmware.
محدد ألوان HEX
اختر لون HEX أو أدخله واحصل على RGB وHSL وCMYK تقريبي والسطوع النسبي ونسب التباين مع الأبيض والأسود.