مولد أزرار CSS مع أيقونة
خصِّص مظهر الزر الخاص بك مع مجموعة واسعة من الخيارات: اختر من العشرات من أيقونات Font Awesome، وضبط الألوان، والحشو، ونصف قطر الحدود، وإضافة ظل للنص أو ظل للصندوق، وتطبيق تأثيرات مختلفة عند التمرير. تُعرض جميع التغييرات في الوقت الفعلي. استخدم النماذج الجاهزة أدناه للبدء بسرعة، أو ابتكر أسلوبك الفريد من الصفر.
تخصيص الزر : نماذج جاهزة
مولد الزر
النص
16px
الصندوق
10px
5px
0px
(معطل عندما يكون حجم الحدود 0)
معاينة حية
سيظهر زرك بهذا الشكل. مرر فوقه لترى التأثير. محاذاة النص واضحة.
كود CSS المُولَّد
.my-button { }
كيفية إستخدام مولد الأزرار
- اختر نموذجاً جاهزاً – انقر على أي زر مثال أعلاه لتحميل أنماطه، أو ابدأ من الصفر.
- خصص الخصائص – استخدم لوحات الأكورديون لضبط النص، الألوان، الحدود، الظلال، وتأثيرات التمرير.
- أضف أيقونة – اختر من مئات أيقونات Font Awesome في القائمة المنسدلة.
- عاين مباشرة – شاهد تغييراتك فوراً في لوحة المعاينة.
- انسخ الكود – انقر على زر "نسخ CSS" لاستخدام الكود في مشروعك.
يمكنك أيضاً استخدام زر نمط عشوائي للإلهام أو إعادة للافتراضي للبدء من جديد.