Animasi klik tombol

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 20 dari 27.

Terkadang kita ingin tombol langsung memberikan respons saat diklik, seperti mengecil, bersinar, atau memantul. Kita dapat memicu animasi atau transisi CSS menggunakan JavaScript.

Pertama, buat tombol sederhana di HTML-mu:

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

Selanjutnya, tambahkan CSS dasar untuk menata tombol:

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

Sekarang, tambahkan JavaScript untuk membuat animasi klik:

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

button.addEventListener('click', function() {
  // Tambahkan class untuk efek klik
  button.classList.add('button-clicked');
  
  // Hapus class setelah animasi selesai
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Terakhir, tambahkan CSS untuk efek animasi:

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

Saat diklik, tombol kini akan sedikit mengecil dan berubah warna, memberikan umpan balik visual kepada pengguna.

Tantangan

Mudah

Saat tombol diklik, tambahkan class CSS "button-clicked" ke tombol tersebut sebagai umpan balik visual.

Tambahkan baris yang menerapkan class ini di dalam event listener klik.

Coba sendiri

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