چگونه ایجاد می‌شود: دکمه دانلود

چگونه دکمه دانلود ایجاد می‌کنیم

مرحله اول - اضافه کردن HTML:

کتابخانه نماد را اضافه کنید، به عنوان مثال font Awesome، و نمادها را به دکمه HTML متصل کنید:

<!-- اضافه کردن کتابخانه نماد -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- عرض خودکار -->
<button class="btn"><i class="fa fa-download"></i> دانلود</button>
<!-- تمام عرض -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> دانلود</button>

مرحله دوم - اضافه کردن CSS:

/* تنظیمات استایل دکمه */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}
/* موس روی آن قرار دارد زمانی که پس‌زمینه تاریک می‌شود */
.btn:hover {
  background-color: RoyalBlue;
}

آزمایش کنید

صفحات مرتبط

آموزش:آموزش آیکون

آموزش:دکمه CSS