אנימציות בלחיצה על כפתור

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 20 מתוך 27.

לפעמים אנחנו רוצים שכפתורים יספקו משוב מיידי בעת לחיצה עליהם, כמו להתכווץ, לזהור או לקפוץ. אפשר להפעיל אנימציות או מעברים של CSS באמצעות JavaScript.

ראשית, צור כפתור פשוט ב-HTML שלך:

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

לאחר מכן, הוסף מעט CSS בסיסי לעיצוב הכפתור:

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

כעת, הוסף JavaScript כדי ליצור את אנימציית הלחיצה:

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

button.addEventListener('click', function() {
  // הוסף מחלקה ליצירת אפקט הלחיצה
  button.classList.add('button-clicked');
  
  // הסר את המחלקה לאחר שהאנימציה מסתיימת
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

לבסוף, הוסיפו את ה-CSS עבור אפקט האנימציה:

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

בעת לחיצה, הכפתור יתכווץ מעט וישנה את צבעו, וכך יספק למשתמש משוב חזותי.

אתגר

קל

בעת לחיצה על הכפתור, הוסף לו את מחלקת ה-CSS "button-clicked" כדי לספק משוב חזותי.

הוסף את השורה שמחילה את המחלקה הזו בתוך מאזין אירוע הלחיצה.

נסו בעצמכם

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