Hoạt ảnh khi nhấn nút

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 20 trên 27.

Đôi khi, bạn muốn nút phản hồi ngay khi được nhấn, chẳng hạn như co nhỏ lại, phát sáng hoặc nảy lên. Bạn có thể kích hoạt hoạt ảnh hoặc hiệu ứng chuyển tiếp CSS bằng JavaScript.

Trước tiên, hãy tạo một nút đơn giản trong HTML:

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

Sau đó, thêm một chút CSS cơ bản để tạo kiểu cho nút:

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

Bây giờ, thêm JavaScript để tạo hiệu ứng khi nhấp:

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

button.addEventListener('click', function() {
  // Thêm một lớp để tạo hiệu ứng khi nhấp
  button.classList.add('button-clicked');
  
  // Xóa lớp sau khi hiệu ứng động kết thúc
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Cuối cùng, thêm CSS cho hiệu ứng hoạt ảnh:

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

Khi được nhấp, nút sẽ hơi thu nhỏ và đổi màu, giúp người dùng nhận biết thao tác.

Thử thách

Dễ

Khi nhấn nút, hãy thêm lớp CSS "button-clicked" vào nút để tạo phản hồi trực quan.

Thêm dòng áp dụng lớp này vào bên trong trình xử lý sự kiện nhấp chuột.

Tự làm thử

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