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 bisa 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 mengatur gaya 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. Selektor menggabungkan id dan class, sehingga lebih spesifik daripada aturan #animatedButton dan nilai background-color pada aturan ini yang berlaku selama class tersebut ada:

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

Saat diklik, tombol akan sedikit mengecil dan berubah warna, sehingga pengguna mendapat umpan balik visual.

Tantangan

Mudah

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

Tambahkan baris yang menerapkan kelas 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>