نمایی از دکمه Add to Cart با انیمیشن ورود آیکن سبد خرید

آموزش طراحی دکمه Add to Cart با انیمیشن CSS و JavaScript

,

در این مقاله یاد می‌گیریم چگونه یک دکمه “Add to Cart” با انیمیشن ساده و بصری جذاب تهیه کنیم. در این نمونه:

  • با کلیک روی دکمه:
    • متن “Add to Cart” محو می‌شود
    • آیکن سبد خرید با انیمیشن از سمت چپ وارد می‌شود و در وسط موقف می‌شود

 

کد HTML:

<button id="cartBtn">
  <span class="text">Add to Cart</span>
  <i class="fas fa-cart-shopping icon"></i>
</button>

 

  • <button> یک دکمه کلیکی است
  • <span class="text"> متن اولیه دکمه است
  • <i class="fas fa-cart-shopping"> آیکن سبد خرید از Font Awesome

 

کد CSS:

 

button {
  width: 200px;
  height: 60px;
  background: #f97316;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.text, .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
}
.text {
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon {
  left: -40px;
  font-size: 24px;
  opacity: 0;
}
.clicked .text {
  opacity: 0;
}
.clicked .icon {
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
  • دکمه همه چیز را درون خود جای می‌دهد
  • .clicked یک کلاس است که بعد از کلیک به دکمه اضافه می‌شود

کد JavaScript:

 

document.getElementById('cartBtn').addEventListener('click', function () {
  this.classList.add('clicked');
});

 

با کلیک روی دکمه، کلاس clicked به آن اضافه می‌شود و CSS انیمیشن را اجرا می‌کند.

کد کامل:

در صورتی که می‌خواهید همه کدها را به صورت یکجا کپی و استفاده کنید، از قطعه کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add to Cart Animation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    body {
      margin: 0;
      background: #f3f4f6;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: sans-serif;
    }
    button {
      width: 200px;
      height: 60px;
      background: #f97316;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    .text, .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s ease;
    }
    .text {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon {
      left: -40px;
      font-size: 24px;
      opacity: 0;
    }
    .clicked .text {
      opacity: 0;
    }
    .clicked .icon {
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  </style>
</head>
<body>

  <button id="cartBtn">
    <span class="text">Add to Cart</span>
    <i class="fas fa-cart-shopping icon"></i>
  </button>

  <script>
    document.getElementById('cartBtn').addEventListener('click', function () {
      this.classList.add('clicked');
    });
  </script>

</body>
</html>

 

جمع‌بندی:

با کمترین کد و فقط یک دکمه، می‌توان انیمیشنی زیبا در ظاهر سایت ایجاد کرد که توجه کاربران را جلب کند. این انیمیشن هم اختصار است و هم قابل تکامل.

اگر این آموزش برای شما مفید بود یا سوالی داشتید، خوشحال می‌شویم در بخش نظرات همین صفحه با ما در میان بگذارید.

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *