مولد أزرار CSS

ما هو «مولد أزرار CSS»؟

مولد أزرار CSS is a comprehensive free online tool that helps you quickly generate beautiful CSS button styles. No coding required — adjust parameters via the visual panel for real-time preview, and generate ready-to-use CSS/HTML/SCSS code with one click.

الميزات الأساسية

• التحكم في النص/الخط — Customize button text, font, size, color, weight, italic, letter spacing, and line height
• الخلفية — Background color + opacity control, supports linear/radial/conic gradients
• الحجم/نصف القطر — Independent width, height, and 4-side padding controls, supports unified or separate corner radius
• تأثيرات الظل — Text shadow (X/Y/Blur/Color) + Box shadow (X/Y/Blur/Spread/Color/Inset)
• مراقبة الحدود — Unified or 4-side independent borders (width/style/color), supports border-image gradient borders
• حالات التمرير/التفعيل — Hover background color, scale, Y-offset, gradient/shadow overlay; press offset + automatic color darkening
• الإعدادات المسبقة للرسوم المتحركة — 8 CSS animations: Neon Glow, Slide Reveal, Progress Fill, Border Snake, Pulse Scale, Ripple Effect, 3D Rotate, Fill Rise
• الرسوم المتحركة الانتقالية — Adjustable duration and timing function

أنماط محددة مسبقًا

يتضمن 10 أنماط ألوان قابلة للتطبيق بنقرة واحدة: الأزرق المسطح، والأخضر ثلاثي الأبعاد البارز، والأرجواني المتدرج، والأخضر النيون، و«Glassmorphism»، والخطوط الخارجية الداكنة، والأشكال الدائرية، والأحمر المادي، والبرتقالي الكلاسيكي، و«Minimal Ghost». يمكنك التبديل بسرعة بين الأنماط المختلفة.

إخراج الكود

• CSS — Complete button style code (.btn-custom + :hover + :active), optional vendor prefixes
• HTML — Sample code for both <button> and <a> tags
• SCSS — SCSS mixin version for easy reuse in projects

دعم الأيقونات المضمنة

يتضمن 10 أيقونات SVG مدمجة من Lucide (تنزيل، سهم لليمين، بحث، قلب، نجمة، إعدادات، مستخدم، بريد، إرسال، تحميل) مع إمكانية اختيار الموضع (يسار/يمين) والحجم.