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

جزء من قسم 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() {
  // أضف فئة لتأثير النقر
  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" إليه للحصول على تغذية راجعة مرئية.

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

جرّب بنفسك

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