Softonic

منشئ أزرار CSS

خطوة ١ / ٤ نص الزر
منتقي الألوان

نص الزر

اكتب النص الذي سيظهر على الزر، بحد أقصى 120 حرفًا. يُدرج كنص عادي، لذلك لا تُفسَّر وسوم 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 آمن في المقتطف والملف المنزّل. تُقبل الألوان كقيم سداسية عشرية من 3 أو 6 أو 8 خانات، مع الرمز # أو بدونه، ويُرفض أي إدخال آخر فلا يصل إلى CSS. تُحفظ الأرقام بمنزلة عشرية واحدة، وأي قيمة خارج النطاق الموضح بجانب عنصر التحكم تُرفض مع رسالة بدلا من تغييرها بصمت.

بين الخطوات، يُحفظ التصميم في sessionStorage للتبويب الحالي. لا توضع تسمية الزر أو قيم التصميم في عناوين URL للمسار ولا ترسل عبر خوادمنا.

استخدام حالة التحميل

أضف سمة الانشغال وأزلها من كود التطبيق:

<button type="button" class="generated-button-1jpsu56" aria-busy="true" disabled>
  <span class="generated-button-1jpsu56__label">جار الحفظ</span>
</button>

تخبر aria-busy تقنيات المساعدة بأن التحديث جار. أضف disabled أيضا عندما يلزم منع التفعيل المتكرر. عند انتهاء العملية، أزل السمتين وانقل أي رسالة نجاح أو خطأ مهمة إلى منطقة حالة مناسبة.

الأسئلة الشائعة

لا. يوفّر حسابات للتباين وقاعدة تركيز ظاهرة ومعالجة لتقليل الحركة وHTML دلاليا وحدا أدنى للهدف قدره 44 px. يعتمد التوافق على الصفحة النهائية والألوان المحيطة والمحتوى والسلوك والاختبار.

لا. يبقى النص والتصميم في متصفحك. بين الخطوات يُحفظان في تخزين الجلسة في التبويب نفسه، ولا توضع القيم التي أدخلتها في عنوان URL أو طلبات الخادم.

الزر مناسب لإجراءات مثل الإرسال أو الفتح أو التبديل. استخدم رابطا يتضمن href حقيقيا للتنقل، ثم طبّق الفئة المنشأة عليه إذا أردت أن يشارك الزر الشكل نفسه.

يعرض المحرر رسالة خطأ ويبقي الإخراج كاملا ومحددا في حقل نصي واضح لتتمكن من نسخه يدويا. ولا يعرض النجاح إلا بعد اكتمال Clipboard API.

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

عدّاد FPS

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

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مدقّق OpenAPI

الصق مستند OpenAPI أو Swagger بصيغة JSON أو YAML وافحص بنيته الأساسية: حقل الإصدار وكائن info والمسارات، مع أخطاء وتحذيرات واضحة.

منسّق PHP

أضف فواصل أسطر ومسافات بادئة من مسافتين أو 4 مسافات إلى مقطع PHP بسيط. راجع النتيجة: فهذه الأداة ليست محلّل PHP ولا تطبّق PSR-12.

مولّد مؤشرات التحميل بلغة CSS

أنشئ دوّارًا دائريًا بـ CSS خالص: اضبط القطر وسماكة الحدود واللون وسرعة الدوران، وشاهد المعاينة المباشرة، وانسخ كود CSS جاهزًا للاستخدام. بلا SVG وبلا JavaScript.

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