رسوم متحركة عند النقر على الزر

جزء من قسم JavaScript in Action في رحلة 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() {
  // Add a class for the click effect
  button.classList.add('button-clicked');
  
  // Remove the class after animation completes
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

أخيرًا، أضف CSS لتأثير animation:

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

عند النقر، سينكمش button قليلًا الآن ويتغير لونه، مما يوفر ملاحظات مرئية للمستخدم.

التحدي

سهل

عند النقر على button، أضف فئة CSS "button-clicked" إليها للحصول على ملاحظات مرئية.

أضف السطر الذي يطبّق هذه الفئة داخل مستمع حدث click.

جرّب بنفسك

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