مولّد أزرار CSS
صمّم الأزرار وانسخ CSS نظيفًا.
اضبط نص الزر والألوان وحواف الاستدارة والمسافات وحجم الخط، وعاينه مباشرة، ثم انسخ CSS جاهزًا للاستخدام يشمل حالة التمرير.
الخلفية
لون النص
لون التمرير
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}كيفية توليد CSS للأزرار
- اكتب نص الزر الذي تريده.
- اختر ألوان الخلفية والنص والتمرير.
- عدّل الاستدارة والمسافات وحجم الخط بالمنزلقات.
- انسخ CSS وأضف قاعدة التمرير إلى ملف أنماطك.
الأسئلة الشائعة
هل يتضمن CSS تأثير التمرير؟
نعم. تُولَّد قاعدة :hover بلون التمرير الذي اخترته إلى جانب النمط الأساسي.
هل يمكن تغيير الخط أو سمكته؟
الناتج يضبط سمك الخط على 700. يمكنك تعديل font-family وخصائص أخرى بحرية بعد اللصق.
هل يُرفع أي شيء؟
لا. المولّد يعمل بالكامل على جانب العميل ولا يخزّن أي شيء.