ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

در این آموزش از صفر تا صد طراحی یک دکمه دانلود مدرن با استفاده از HTML و CSS را یاد می‌گیرید؛ دکمه‌ای که هنگام کلیک، وارد حالت progress شده، انیمیشن چرخان نمایش می‌دهد و در پایان عملیات، به حالت موفقیت (success) با آیکون تیک و متن done تغییر می‌کند.

بخش اول: طراحی اولیه دکمه دانلود

در ابتدا یک دکمه ساده طراحی می‌کنیم که دارای آیکون دانلود (⬇) و متن download باشد. این دکمه دارای طراحی دایره‌ای، رنگ پس‌زمینه شفاف، حاشیه رنگی، و استایل مدرن است.

کد HTML ابتدایی:

<button class="download-btn">
  <span class="icon">⬇</span>
  <span class="text">download</span>
</button>

بخش دوم: استایل‌دهی کامل با CSS

در این بخش، با استفاده از CSS دکمه را به‌شکلی مدرن، جذاب و واکنش‌گرا طراحی می‌کنیم. هدف این است که کاربر نه‌تنها از ظاهر دکمه لذت ببرد، بلکه هنگام تعامل با آن (مثلاً کلیک برای دانلود) تجربه‌ی واضح، طبیعی و دل‌چسبی داشته باشد.

رنگ‌ها و وضعیت‌ها

ما از سه رنگ اصلی برای نشان دادن وضعیت‌های مختلف دکمه استفاده می‌کنیم:

آبی (رنگ اولیه): برای حالت پیش‌فرض که نشان می‌دهد کاربر هنوز روی دکمه کلیک نکرده.
زرد مایل به نارنجی (warning): برای نمایش حالت «در حال دانلود» که با انیمیشن چرخشی همراه است.
سبز (success): پس از اتمام دانلود، دکمه سبز می‌شود تا به کاربر تأیید دهد که عملیات با موفقیت انجام شده.

استفاده از این رنگ‌ها نه‌تنها بر پایه استانداردهای طراحی رابط کاربری (UI) است، بلکه به صورت بصری و بدون نیاز به توضیح، وضعیت را به کاربر منتقل می‌کند.

CSS کامل برای طراحی دکمه:

:root {
  --primary: #00d2ff;
  --warning: #e0a800;
  --success: #28a745;
  --text-color: #ffffff;
  --text-muted: #dddddd;
  --bg-dark: #2e3333;
}

body {
  background-color: var(--bg-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.download-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: 50px;
  padding: 8px 20px 8px 8px;
  font-family: sans-serif;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.download-btn .icon {
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.download-btn .text {
  font-size: 16px;
  margin-left: 12px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.download-btn:hover {
  background-color: rgba(0, 210, 255, 0.08);
  transform: translateY(-1px);
}

.download-btn.loading {
  border-color: var(--warning);
}

.download-btn.loading .icon {
  background-color: white;
  color: var(--warning);
  animation: spin 1s linear infinite;
}

.download-btn.loading .text {
  color: var(--text-muted);
}

.download-btn.done {
  border-color: var(--success);
}

.download-btn.done .icon {
  background-color: white;
  color: var(--success);
}

.download-btn.done .text {
  color: var(--success);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

بخش سوم: افزودن رفتار دکمه با JavaScript

برای شبیه‌سازی دانلود، با استفاده از جاوااسکریپت کلاس‌های loading و done را به دکمه اضافه می‌کنیم. این باعث فعال شدن انیمیشن و تغییر رنگ و آیکون می‌شود.

JavaScript برای مدیریت وضعیت دکمه:

<script>
  function startDownload(btn) {
    if (btn.classList.contains('loading')) return;

    const icon = btn.querySelector('.icon');
    const text = btn.querySelector('.text');

    btn.classList.remove('done');
    btn.classList.add('loading');
    icon.textContent = '⟳';
    text.textContent = 'downloading...';

    setTimeout(() => {
      btn.classList.remove('loading');
      btn.classList.add('done');
      icon.textContent = '✔';
      text.textContent = 'done';
    }, 3000);
  }
</script>

کد کامل HTML آماده اجرا

در اینجا کل کد HTML، CSS و JS را در یک فایل یک‌پارچه می‌بینید. کافی است آن را در مرورگر اجرا کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Download Button</title>
  <style>
    :root {
      --primary: #00d2ff;
      --warning: #e0a800;
      --success: #28a745;
      --text-color: #ffffff;
      --text-muted: #dddddd;
      --bg-dark: #2e3333;
    }

    body {
      background-color: var(--bg-dark);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .download-btn {
      display: flex;
      align-items: center;
      background-color: transparent;
      border: 2px solid var(--primary);
      border-radius: 50px;
      padding: 8px 20px 8px 8px;
      font-family: sans-serif;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
    }

    .download-btn .icon {
      width: 40px;
      height: 40px;
      background-color: var(--primary);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .download-btn .text {
      font-size: 16px;
      margin-left: 12px;
      white-space: nowrap;
      transition: color 0.3s ease;
    }

    .download-btn:hover {
      background-color: rgba(0, 210, 255, 0.08);
      transform: translateY(-1px);
    }

    .download-btn.loading {
      border-color: var(--warning);
    }

    .download-btn.loading .icon {
      background-color: white;
      color: var(--warning);
      animation: spin 1s linear infinite;
    }

    .download-btn.loading .text {
      color: var(--text-muted);
    }

    .download-btn.done {
      border-color: var(--success);
    }

    .download-btn.done .icon {
      background-color: white;
      color: var(--success);
    }

    .download-btn.done .text {
      color: var(--success);
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <button class="download-btn" onclick="startDownload(this)">
    <span class="icon">⬇</span>
    <span class="text">download</span>
  </button>

  <script>
    function startDownload(btn) {
      if (btn.classList.contains('loading')) return;

      const icon = btn.querySelector('.icon');
      const text = btn.querySelector('.text');

      btn.classList.remove('done');
      btn.classList.add('loading');
      icon.textContent = '⟳';
      text.textContent = 'downloading...';

      setTimeout(() => {
        btn.classList.remove('loading');
        btn.classList.add('done');
        icon.textContent = '✔';
        text.textContent = 'done';
      }, 3000);
    }
  </script>
</body>
</html>

نتیجه‌گیری

با چند خط HTML، CSS و JavaScript می‌توان یک دکمه‌ی حرفه‌ای و زیبا برای عملیات دانلود یا هر عملیات زمان‌بر دیگری ساخت. این دکمه با استفاده از انیمیشن، رنگ‌بندی هشدار و موفقیت، تجربه‌ی کاربری (UX) بهتری ارائه می‌دهد و می‌تواند در اپلیکیشن‌های واقعی به‌خوبی مورد استفاده قرار گیرد.

نظر شما چیه؟

اگر از این دکمه در پروژه‌هات استفاده کردی، یا سوالی درباره‌ی پیاده‌سازی یا شخصی‌سازی اون داری، خوشحال می‌شم در بخش دیدگاه‌ها بخونم!

منتظر نظرات ارزشمندت هستم.

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS