أداة تفاعلية لتصميم أزرار CSS حسب رغبتك: اختر لون الخلفية، لون النص، حجم الخط، الحشوة الداخلية، الحدود، الزوايا الدائرية، الظل، وتأثير المرور (hover). شاهد المعاينة المباشرة واحصل على كود CSS جاهز للاستخدام في مشاريعك. مثالية للمطورين والمصممين لإنشاء أزرار مخصصة بسرعة.

يمكنك تخصيص كل خاصية بشكل مستقل، وسيتم تحديث الكود تلقائياً. انسخ الكود الناتج وألصقه في ملف CSS الخاص بك، ثم استخدم class "custom-button" على أي عنصر زر.

تصميم الأزرار باستخدام CSS يتيح تحكمًا كاملاً في المظهر. هذه الأداة تولد كود CSS للخصائص التالية: background-color، color، font-size، padding، border، border-radius، box-shadow، وتأثير hover (تغميق اللون بنسبة 15%). جميع الخيارات قابلة للتعديل، ويتم تحديث المعاينة فورياً. يمكنك أيضاً إضافة نص الزر الخاص بك. الأداة تعمل محلياً بالكامل – لا يتم إرسال أي بيانات إلى الخادم. مثالية لإنشاء أزرار متسقة في جميع أنحاء موقعك.

• نص الزر : اكتب النص الذي تريد ظهوره على الزر.
• الألوان : اختر لون الخلفية ولون النص باستخدام منتقي الألوان.
• الحجم والحشوة : حدد حجم الخط بالبكسل، والحشوة الداخلية (أعلى/أسفل ويمين/يسار).
• الحدود : اختر نمط الحدود (صلبة، متقطعة، منقطة)، العرض، واللون.
• الزوايا : اضبط نصف قطر الزوايا لجعل الزر دائرياً أو مربعاً.
• الظل : أضف ظلاً للزر بتحديد الإزاحة الأفقية والعمودية والتمويه واللون.
• تأثير hover : فعّل الخيار لجعل الزر يصبح أغمق عند تمرير الماوس.
• انسخ الكود : بعد الانتهاء من التخصيص، اضغط زر "نسخ الكود" لنسخ كود CSS الناتج واستخدامه في مشروعك.
• ملاحظة : جميع القيم الرقمية (مثل الحشوة، العرض، الظل) يتم تحويلها تلقائياً إلى بكسل (px) إذا كانت أرقاماً فقط.