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>