يستخدم هذا المثال عناصر تحكم المولد فقط. تُظهر الصور أعلاه أوراق أنماط تم تنزيلها فعلياً مطبقة على أزرار HTML عادية، وليست لقطات شاشة للمحرر.
ابدأ بـ Signature
افتح مولد أزرار CSS. في الإعدادات المسبقة، اختر Signature من مجموعة Everyday. اضبط نص الزر على "Get started". في منطقة الكود، اضبط اسم الفئة (Class name) على cta-button.
يستبدل الإعداد المسبق الأنماط الافتراضية وأنماط التمرير، بينما تظل التسمية واسم الفئة الخاص بك كما هما. اختر نقطة البداية قبل إجراء تعديلات مفصلة.
يربط اسم الفئة قواعد CSS بزر HTML الخاص بك. يقوم المولد بتنظيف الأحرف غير المدعومة؛ استخدم اسماً قصيراً ومميزاً لتجنب تنسيق العناصر غير ذات الصلة.
إنشاء زر الحبوب المتدرج
حافظ على حالة التحرير (Editing state) على الافتراضي (Default). في النص، اختر System sans، وحجم الخط 18 بكسل، والوزن عريض (Bold). حافظ على لون النص الأبيض، والنمط العادي، والمحاذاة المركزية، وارتفاع السطر 1.4.
في التعبئة (Fill)، اختر تدرج خطي (Linear gradient). استخدم اللونين والزاوية أدناه. اضبط الحشوة الأفقية على 32 بكسل والحشوة الرأسية على 16 بكسل. في الشكل (Shape)، حافظ على تفعيل ربط جميع الزوايا واضبط نصف قطر الزاوية على 100 بكسل. يظل عرض الحدود 0 بكسل.
في الظل (Shadow)، حافظ على تفعيل ظل المربع (Box shadow). استخدم إزاحة أفقية 0 بكسل، وإزاحة رأسية 8 بكسل، وضبابية 24 بكسل، وانتشار −4 بكسل، ولون #460BD8، وشفافية 32%. اترك ظل الإدخال (Inset shadow) وظل النص (Text shadow) معطلين.
تغير الحشوة المساحة حول النص. يغير نصف قطر الزاوية المخطط التفصيلي. يخلق نصف القطر الكبير شكل الحبوب هذا دون جعل التسمية أعرض.
امنح التمرير معالجة خاصة
بدّل حالة التحرير إلى التمرير (Hover). في التعبئة، غيّر لون الخلفية إلى #33099E واللون الثاني إلى #6D20BF. حافظ على زاوية التدرج عند 135°. في الظل، غيّر الإزاحة الرأسية إلى 10 بكسل والضبابية إلى 28 بكسل. اترك الإعدادات الأخرى دون تغيير.
استخدم أزرار الافتراضي، والتمرير، والنشط على اللوحة لفحص كل حالة. يمكنك أيضاً التمرير فوق زر المعاينة أو الضغط عليه. غيّر اللوحة بين الفاتح والداكن لمراجعة حافتها وظلها.
تختار حالة التحرير الأنماط التي تغيرها. تغير حالة اللوحة فقط ما تعاينه. عد إلى التحرير الافتراضي قبل ضبط المظهر الساكن.
خصائص التمرير التي لا تزال تطابق الافتراضي تتبع تعديلات الافتراضي اللاحقة. بمجرد تخصيص خاصية تمرير، فإنها تظل مستقلة. أعد فحص كلتا الحالتين بعد تغيير النمط الأساسي.
تصدير واختبار في صفحتك
حدد علامة التبويب CSS واستخدم نسخ CSS، أو اختر تنزيل لحفظ cta-button.css. حدد علامة التبويب HTML وانسخ ترميز الزر المطابق. يتضمن HTML نفس اسم الفئة وزراً بنوع "button".
أضف CSS إلى ورقة الأنماط الخاصة بك، أو اربط الملف الذي تم تنزيله من صفحتك. ضع HTML حيث ينتمي الزر. يعمل التصديران معاً: زر HTML وحده لا يتضمن تنسيقه.
افتح الصفحة واختبر حالاتها الافتراضية، والتمرير، وتركيز لوحة المفاتيح، والضغط. يتضمن التصدير مخططاً تفصيلياً مرئياً عند التركيز، وحركة نشطة صغيرة، وقاعدة تقليل الحركة. لا تزال أنماطك المحيطة والخطوط المثبتة تؤثر على النتيجة.
الزر الذي تم إنشاؤه هو عنصر تحكم منسق. اربط سلوك النقر الخاص به في مشروعك؛ استخدم نوع الزر الصحيح عند إضافته إلى نموذج.
cta-button.css
اسم الملف الذي تم تنزيله يتبع اسم الفئة.
أسئلة شائعة
هل أحتاج إلى إطار عمل CSS؟
لا. المخرجات هي CSS قياسي بالإضافة إلى زر HTML عادي. الصق CSS في ورقة الأنماط الخاصة بك واستخدم الفئة المطابقة على الزر.
هل يحفظ التنزيل HTML أيضاً؟
يحفظ التنزيل ملف .css مسمى باسم الفئة. انسخ ترميز الزر بشكل منفصل من علامة التبويب HTML.
هل يمكنني إعطاء كل زاوية نصف قطر مختلف؟
نعم. في الشكل، أوقف تشغيل ربط جميع الزوايا، ثم اضبط أعلى اليسار، وأعلى اليمين، وأسفل اليمين، وأسفل اليسار بشكل مستقل. يحافظ هذا المثال على ربطها لشكل الحبوب.
هل سيبقى تصميمي هنا في المرة القادمة؟
يحاول الاستوديو حفظ المسودة الحالية في التخزين المحلي للمتصفح. هذا ليس حساباً أو نسخة احتياطية عبر الأجهزة. إعدادات المتصفح، أو مسح بيانات الموقع، أو إعادة التعيين قد تؤدي إلى إزالتها أو استبدالها، لذا قم بتصدير العمل الذي ترغب في الاحتفاظ به.
هل يتم رفع زري إلى خادم؟
يتم تشغيل معاينة التصميم وتوليد CSS/HTML في متصفحك. لا يقوم المحرر برفع نص الزر أو مسودة التصميم الخاصة بك لإنشاء ملف التصدير.
امنح زرّك التالي أسلوبه الخاص.
اختر نقطة بداية، واضبط التفاصيل، وأضف الكود إلى مشروعك.