Animationen beim Klick auf Schaltflächen

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

Manchmal sollen Schaltflächen beim Anklicken sofortiges Feedback geben, zum Beispiel durch Schrumpfen, Leuchten oder Hüpfen. Wir können CSS-Animationen oder -Übergänge mit JavaScript auslösen.

Erstelle zunächst einen einfachen Button in deinem HTML:

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

Füge dann etwas grundlegendes 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üge nun JavaScript hinzu, um die Klickanimation zu erstellen:

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

button.addEventListener('click', function() {
  // Füge eine Klasse für den Klickeffekt hinzu
  button.classList.add('button-clicked');
  
  // Entferne die Klasse nach Abschluss der Animation
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

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

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

Beim Klicken wird die button-Schaltfläche nun leicht schrumpfen und die Farbe ändern, wodurch dem Benutzer visuelles Feedback gegeben wird.

Aufgabe

Einfach

Wenn auf die Schaltfläche geklickt wird, füge ihr zur visuellen Rückmeldung die CSS-Klasse "button-clicked" 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>