Animations au clic sur un bouton

Fait partie de la section JavaScript in Action du Journey HTML de Coddy. Leçon 20 sur 27.

Parfois, nous voulons que les boutons donnent un retour instantané lorsqu'on clique dessus — comme rétrécir, briller ou rebondir. Nous pouvons déclencher des animations ou des transitions CSS en utilisant JavaScript.

Tout d'abord, créez un bouton simple dans votre HTML :

<button id="animatedButton">Click Me</button>

Ensuite, ajoutez du CSS de base pour styliser le bouton :

#animatedButton {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

Maintenant, ajoutez du JavaScript pour créer l'animation au clic :

const button = document.getElementById('animatedButton');

button.addEventListener('click', function() {
  // Ajouter une classe pour l'effet de clic
  button.classList.add('button-clicked');
  
  // Supprimer la classe une fois l'animation terminée
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Enfin, ajoutez le CSS pour l'effet d'animation :

.button-clicked {
  transform: scale(0.95);
  background-color: #45a049;
}

Lorsqu'on clique dessus, le bouton va maintenant légèrement rétrécir et changer de couleur, offrant ainsi un retour visuel à l'utilisateur.

Défi

Facile

Lorsque le bouton est cliqué, ajoutez la classe CSS "button-clicked" à celui-ci pour un retour visuel.

Ajoutez la ligne qui applique cette classe à l'intérieur de l'écouteur d'événement de clic.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Button Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Interactive Button Demo</h1>
    <p>Click the button below to see a smooth animation effect.</p>
  </header>

  <main class="content">
    <button id="animatedButton" class="btn">Click Me</button>
  </main>

  <script src="script.js"></script>
</body>
</html>