Animation du Bouton d'achat

[Sofia555]

Bonjour,

J'aimerais savoir s'il y a un CSS ou un code pour animer le bouton d'achat d'ajout au panier pour qu'il bouge et qu'il soit mis en évidence.

Pourriez-vous m'aider svp ?

[Moeed]

Hey @Sofia555 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[santosh-kori]

Please adding below css code into your current theme code linked Stylesheet CSS file.
Let me know, if need specific CSS code.

form[action="/cart/add"] button[type="submit"] {
  background-color: #28a745; /* Green color */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
}

/* Button Hover Effect */
form[action="/cart/add"] button[type="submit"]:hover {
  background-color: #218838; /* Darker green */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Animation Keyframes */
@keyframes moveAndHighlight {
  0% {
    transform: translateX(0);
    box-shadow: 0 0 0 rgba(255, 255, 0, 0);
  }
  25% {
    transform: translateX(-10px);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
  }
  50% {
    transform: translateX(10px);
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.7);
  }
  75% {
    transform: translateX(-10px);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
  }
  100% {
    transform: translateX(0);
    box-shadow: 0 0 0 rgba(255, 255, 0, 0);
  }
}

/* Applying the Animation */
form[action="/cart/add"] button[type="submit"]:active {
  animation: moveAndHighlight 0.6s ease-in-out;
}