كيفية إنشاء: زر تحميل

كيفية ضبط نمط زر التحميل

الخطوة الأولى - إضافة HTML:

إضافة مكتبة الرموز، مثل Font Awesome، وربط الرموز إلى زر HTML:

<!-- إضافة مكتبة الرموز -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- إضافة رمز Font Awesome إلى الزر (لاحظ أن fa-spin سيدور الرمز) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

الخطوة الثانية - إضافة CSS:

/* ضبط نمط الزر */
.buttonload {
  background-color: #04AA6D; /* خلفية زرقاء داكنة */
  border: none; /* إزالة الحواف */
  color: white; /* نص أبيض */
  padding: 12px 16px; /* بعض الهوامش الداخلية */
  font-size: 16px /* ضبط حجم الخط */
}

جرب بنفسك

الصفحات ذات الصلة

دليل:دليل الرموز

دليل:زر CSS

دليل:كيفية إنشاء محمل CSS