Animation du Bouton d'achat

Start a Business
,

Topic summary

Demande d’animation pour bouton d’achat

Un utilisateur cherche à ajouter une animation CSS au bouton d’achat de sa boutique Shopify pour améliorer la visibilité et encourager les clics.

Réponses proposées:

  • Un modérateur demande l’URL de la boutique et le mot de passe (si activé) pour examiner la situation
  • Un développeur fournit un code CSS complet incluant:
    • Styles de base (couleur verte, padding, bordures arrondies)
    • Effet hover avec ombre portée
    • Animation keyframes créant un mouvement horizontal avec effet de surbrillance
    • Transition fluide de 0.6 secondes

Statut: Solution technique proposée, en attente de confirmation si le code répond aux besoins spécifiques de l’utilisateur. Le code cible les boutons de type form[action="/cart/add"] et applique une animation au clic.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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 ?

2

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

3

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;
}