منشئ أزرار CSS

خصّص زرًا (الألوان والزوايا المستديرة والظل والنص) وشاهد النتيجة مباشرة قبل نسخ كود CSS الكامل الجاهز للصقه في مشروعك. توليد محلي 100% في متصفحك.

نص الزر

لون الخلفية

لون النص

نصف قطر الزوايا: 8px

حجم النص: 16px

الحشو العمودي (padding): 12px

الحشو الأفقي (padding): 24px

ظل خارجي نص غامق

كود CSS

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

كيف يعمل

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

كيف يُحسب لون التمرير؟

يُولَّد لون التمرير تلقائيًا بإغماق لون الخلفية المختار، لضمان تباين مرئي عند مرور الفأرة دون الحاجة إلى اختيار لون ثانٍ يدويًا.

هل كود CSS المولَّد متوافق مع جميع الأطر؟

نعم، فهو CSS قياسي لا يعتمد على إطار عمل بعينه: يمكنك لصقه في ورقة أنماط تقليدية، أو تكييفه كفئة مساعدة، أو تحويله يدويًا إلى نمط Tailwind أو styled-components إن كان مشروعك يستخدمها.

يُولَّد العرض والكود في الوقت الفعلي داخل متصفحك، دون أي طلب إلى خادم.