تصميم أزرار CSS بصرياً
نظرة عامة
الأزرار من أكثر العناصر استخداماً في أي موقع، وضبط مظهرها — الحشو والألوان والزوايا والظل وحالة التمرير — يتطلّب كثيراً من CSS الدقيق. يتيح لك مولّد الأزرار تنسيق زر بأدوات بصرية ورؤيته حياً، ثم ينسخ CSS الدقيق. تبني هذه الأداة أنماط أزرار جاهزة في متصفحك، فتطابق تصميماً دون كتابة CSS من الصفر.
كيفية الاستخدام
- 1
اضبط النمط الأساسي
اختر ألوان الخلفية والنص، والحشو، ونصف قطر الزاوية، وخط الزر.
- 2
أضف حالة تمرير
حدّد كيف يتغيّر الزر عند التمرير — تبدّل لون أو ظل أو حركة طفيفة.
- 3
انسخ CSS
الصق CSS الزر المولّد (وHTML إن توفّر) في مشروعك.
كيف يعمل
تضبط الخصائص بأدوات — لون الخلفية والنص والحشو ونصف قطر الزاوية والحدّ والخط والظل — بينما تُظهر معاينة حية الزر. كثير من المولّدات تتيح ضبط حالة التمرير ليستجيب الزر للمؤشّر. عندما ترضى، تُخرج الأداة CSS (وغالباً HTML) للصقه في مشروعك. كل شيء يجري محلياً في متصفحك.
متى تستخدمه
تنسيق زر دعوة لاتخاذ إجراء ليطابق علامتك. نمذجة سريعة لأنواع الأزرار (أساسي، ثانوي، شبح). الحصول على CSS لحالة تمرير أو تفعيل دون تجربة وخطأ. تعلّم كيف يتحد الحشو ونصف القطر والظل في مظهر الزر. إنشاء نمط زر متسق لإعادة استخدامه عبر موقع. مطابقة زر من نموذج تصميم.
الأسئلة الشائعة
استخدم عنصر <button> للإجراءات (إرسال، تبديل) و<a> للتنقّل إلى صفحة أخرى. نسّق أيّاً منهما بـ CSS المولّد، لكن اختر العنصر الصحيح لإتاحة الوصول — تعتمد عليه قارئات الشاشة ولوحة المفاتيح.
ملاحظات مهمة
الزر الجميل لا يزال يحتاج أساسيات الوصول: تبايناً كافياً، وحالة تركيز واضحة، وهدف لمس كبيراً بما يكفي. اختبر أيضاً حالتي التمرير والتفعيل، فقد يبدو نمط رائع في السكون غير واضح عند التفاعل.