كيف يمكن اضافة انميشن للزر

الأمر سيتم من خلال CSS فقط عن طريق الـ animation والتحكم في الـ keyframes كالتالي:

.animated-sale-button {
    transition: all 0.3s ease;  

  background: linear-gradient(to right, #f72585, #b5179e, #7209b7, #f72585);
  
  background-size: 200% auto;
  
  animation: gradient-animation 3s linear infinite;
}

}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%; 
  }
  100% {
    background-position: 100% 50%; 
  }
}

بالطبع افترضت أنّ اسم الكلاس الخاص بالزر هو animated-sale-button، ولاحظ أضفت background-size: 200% auto فذلك الجزء الأهم، لجعل صورة الخلفية أي التدرج اللوني أعرض بمرتين من الزر نفسه.

ثم من خلال @keyframes gradient-animation نحدد ما تفعله الحركة، وهو تغيير موضع الخلفية background-position من 0% أي البداية إلى 100% وهي النهاية على المحور الأفقي، وبما أن حجم الخلفية 200%، فتحريكها بنسبة 100% سيُظهر الجزء المخفي من التدرج اللوني، وذلك يخلق وهم الحركة.