مولّد أزرار CSS

مولّد أزرار CSS مجاني عبر الإنترنت. يعالج البيانات فوراً في متصفحك. بدون رفع، بدون تسجيل، خاص تماماً.

المعالجة المحلية

Background (solid)

Text color

Shadow color

Use gradient background

Gradient start

Gradient end

Gradient angle: 135°

Border radius: 8px

Padding X: 20px

Padding Y: 10px

Font size: 16px

Shadow X: 0px

Shadow Y: 4px

Shadow blur: 6px

Hover lift: 2px

Preview

.btn {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 4px 6px #00000040;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 10px #00000040;
}

كيفية الاستخدام

أدخل مدخلاتك أعلاه. يتم تحديث النتيجة تلقائيًا. استخدم زر النسخ لنسخ النتيجة.

خصوصية

تتم كل المعالجة في متصفحك. لا يتم تحميل بياناتك أبدًا إلى أي خادم.

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

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

نعم، مجاني تماما. لا يلزم الاشتراك.

هل تقوم هذه الأداة بتحميل بياناتي؟

لا، تتم جميع عمليات المعالجة محليًا في متصفحك. بياناتك لا تترك جهازك أبدًا.

مولّد أزرار CSS