→ كل أدوات النصوص

مولد أزرار CSS

صمم أزرارا بتدرجات وظلال وتأثيرات hover وانسخ CSS.

  • مجاني
  • بلا تسجيل
  • يعمل على أي جهاز

حول مولد أزرار CSS

صمّم زرًا بصريًا: اختر تدرجًا أو ألوانًا مسطحة والحشو ونصف قطر الحدود والظل وسلوك التمرير، ثم انسخ CSS. اجعل حالتي التمرير والتركيز واضحتين، وأبقِ تباين النص عاليًا بما يكفي للقراءة. وانتقال مدته من 150 إلى 250 ميلي ثانية يجعل تغيّر الحالة يبدو سلسًا.

طريقة استخدام مولد أزرار CSS

  1. اختر ألوانًا أو تدرجًا لخلفية الزر.
  2. حدّد النص والحشو ونصف قطر الحدود والظل وتأثير التمرير hover.
  3. انسخ CSS وطبّق الفئة على زرك.

لماذا تستخدم هذه الأداة؟

تُعرف أيضًا باسم

الأسئلة الشائعة

كيف أضيف تأثير التمرير إلى زر CSS؟

اكتب قاعدة ثانية بالمحدد :hover تغيّر الخلفية أو الظل أو transform، وأضف transition على الزر الأساسي لتتحرك التغييرات.

كيف أجعل الزر متاحًا؟

أبقِ تباين النص والخلفية عاليًا واجعل منطقة النقر كبيرة بما يكفي. أبقِ أيضًا نمط تركيز مرئيًا لمستخدمي لوحة المفاتيح.

هل يمكنني استخدام CSS لرابط منسّق كزر؟

نعم. طبّق الفئة نفسها على وسم anchor وأضف display inline-block وtext-decoration none ليبدو كالمعاينة.

هل مولد أزرار CSS مجانية؟

نعم. استخدام مولد أزرار CSS على Toolipedia مجاني، بلا تسجيل وبلا علامة مائية.

هل استخدامها آمن؟

نعم. تتم كل العمليات الحسابية في متصفحك، ولا يُرسَل أي شيء تُدخله إلى خادمنا.

هل تعمل على هاتفي؟

نعم. تعمل في أي متصفح حديث على Android وiPhone، وكذلك على الأجهزة اللوحية والحواسيب. لا حاجة إلى تثبيت أي شيء.

هل أحتاج إلى حساب؟

لا. افتح الصفحة واستخدم الأداة فحسب. لا تسجيل ولا حاجة إلى بريد إلكتروني.

هل يمكنني وضع مولد أزرار CSS في موقعي؟

نعم. استخدم زر «ضمّن الأداة في موقعك» أسفل الأداة لنسخ مقطع قصير من الشيفرة ولصقه في صفحتك. الخدمة مجانية، ولا تحتاج إلى حساب، وتبقى الأداة تعمل داخل صفحتك.

أدوات ذات صلة