للمطورينجاهزة للاستخدام

صمّم أزرار CSS مباشرة

نسّق زرًا بألوان ومسافات وزوايا وتحويم وتركيز لوحة مفاتيح مباشرة، ثم انسخ CSS وHTML.

دليل الاستخدام

مساحة عمل تفاعلية

لا حاجة إلى حساب

100% in-browser. Styles and labels are not uploaded.

Button label

Background color (hex)Text color (hex)Corner radius (px)Horizontal padding (px)Vertical padding (px)Font size (px)

Live preview: hover or use Tab to inspect focus.

.generated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  background: #2563eb;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.generated-button:hover {
  filter: brightness(0.9);
}

.generated-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

<button type="button" class="generated-button">Try me</button>

Includes a 44px minimum height and keyboard focus state. Check foreground/background contrast and focus visibility in your real layout; generated styles alone do not establish accessibility compliance.

ما هي مولّد أزرار CSS؟

نسّق زرًا بألوان ومسافات وزوايا وتحويم وتركيز لوحة مفاتيح مباشرة، ثم انسخ CSS وHTML.

طريقة العمل

نسّق زرًا بألوان ومسافات وزوايا وتحويم وتركيز لوحة مفاتيح مباشرة، ثم انسخ CSS وHTML.

استخدامات شائعة

نسّق زرًا بألوان ومسافات وزوايا وتحويم وتركيز لوحة مفاتيح مباشرة، ثم انسخ CSS وHTML.

القيود

قد تعتمد النتائج على المتصفح والشبكة والمدخلات والخدمات الخارجية. هذه الأداة للمعلومات ولا تغني عن التشخيص المتخصص أو المشورة المهنية.

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

ما هي مولّد أزرار CSS؟: نسّق زرًا بألوان ومسافات وزوايا وتحويم وتركيز لوحة مفاتيح مباشرة، ثم انسخ CSS وHTML.

أدوات ذات صلة

منشئ تدرجات CSS

أنشئ تدرجات CSS خطية أو شعاعية، واضبط الألوان والمواضع وانسخ الشيفرة مع معاينة.

منشئ تدوير زوايا CSS

اضبط نصف القطر الأفقي والرأسي لكل زاوية بشكل مستقل، وعاين الشكل وانسخ border-radius.

منشئ ظلال CSS

اضبط الإزاحة والتمويه والانتشار واللون، وعاين الطبقات ثم انسخ تعريف box-shadow.

أداة فحص تباين الألوان WCAG

تحقق من توافق التباين بين النص والخلفية مع معايير WCAG AA وAAA لتحسين سهولة القراءة.

CSS Specificity Calculator