Softonic

منشئ أزرار CSS

خطوة ١ / ٤ نص الزر

نص الزر

أدخل تسمية نصية عادية. يحوّل النص الشبيه بـ HTML إلى صيغة آمنة في المقتطف المنشأ.

أنشئ زرا وعاين حالاته الافتراضية وعند مرور المؤشر وتركيز لوحة المفاتيح والضغط والتعطيل والتحميل قبل استخدامه. اختر تعبئة بلون ثابت أو تدرج ثنائي اللون، وحدودا ومسافات وزوايا وظلا وألوانا لكل حالة. يحوّل المنشئ نص الزر إلى صيغة HTML آمنة، ويبقي التصميم داخل متصفحك، وينتج HTML دلاليا وCSS ضمن حدود مدروسة.

كيفية إنشاء زر CSS

  1. 1

    اكتب نص الزر

    أدخل نصا عاديا للاسم الظاهر على الزر. تُحفظ المحارف الشبيهة بـ HTML كنص ولا يجري تنفيذها.

  2. 2

    اضبط التصميم الأساسي

    اختر خلفية ثابتة أو متدرجة، وألوان النص والحدود، والحجم، والحشو، ونصف قطر الزوايا، والظل.

  3. 3

    حدّد حالات التفاعل

    اضبط ألوان وحركة المرور بالمؤشر والضغط والتركيز. تضاف قواعد التعطيل والتحميل تلقائيا.

  4. 4

    راجع الإرشادات

    تحقق من أدنى تباين للنص وتباين مؤشر التركيز والحد الأدنى المفروض لحجم الهدف قبل التصدير.

  5. 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.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig من قواعد المسافة البادئة ونهاية السطر ومجموعة الأحرف، ثم أضف قسمًا صحيحًا لكل لغة في مستودعك: Python وGo وYAML وMakefile وغيرها.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

الأداة متاحة بلغات أخرى