Animations au clic sur un bouton

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

Parfois, nous voulons que les boutons donnent un retour instantané lorsqu’on click dessus, comme en rétrécissant, en brillant ou en rebondissant. Nous pouvons déclencher des animations ou transitions CSS à l’aide de JavaScript.

Commencez par créer un bouton simple dans votre HTML :

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

Ensuite, ajoute un peu de 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() {
  // Ajoute une classe pour l'effet de clic
  button.classList.add('button-clicked');
  
  // Supprime la classe une fois l'animation terminée
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Enfin, ajoute le CSS pour l’effet d’animation :

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

Lorsqu’il est cliqué, le bouton va maintenant légèrement rétrécir et changer de couleur, fournissant un retour visuel à l’utilisateur.

Défi

Facile

Lorsque le bouton est cliqué, ajoutez-lui la classe CSS "button-clicked" pour fournir 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>