Button-Klick-Animationen

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 20 von 27.

Manchmal möchten wir, dass Schaltflächen beim Anklicken eine sofortige Rückmeldung geben – zum Beispiel durch Verkleinern, Leuchten oder Hüpfen. Wir können CSS-Animationen oder -Übergänge mithilfe von JavaScript auslösen.

Erstellen Sie zuerst eine einfache Schaltfläche in Ihrem HTML:

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

Fügen Sie anschließend ein wenig Basis-CSS hinzu, um die Schaltfläche zu gestalten:

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

Fügen Sie nun JavaScript hinzu, um die Klick-Animation zu erstellen:

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

button.addEventListener('click', function() {
  // Fügen Sie eine Klasse für den Klick-Effekt hinzu
  button.classList.add('button-clicked');
  
  // Entfernen Sie die Klasse, nachdem die Animation abgeschlossen ist
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Fügen Sie abschließend das CSS für den Animationseffekt hinzu:

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

Beim Anklicken wird die Schaltfläche nun leicht schrumpfen und die Farbe ändern, um dem Benutzer ein visuelles Feedback zu geben.

Aufgabe

Einfach

Wenn die Schaltfläche angeklickt wird, füge ihr die CSS-Klasse "button-clicked" für visuelles Feedback hinzu.

Füge die Zeile, die diese Klasse anwendet, innerhalb des Click-Event-Listeners hinzu.

Probier es selbst

<!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>