Animações de clique em botões

Parte da seção JavaScript in Action do Journey de HTML da Coddy. Lição 20 de 27.

Às vezes, queremos que os botões forneçam feedback instantâneo quando clicados — como encolher, brilhar ou saltar. Podemos disparar animações ou transições CSS usando JavaScript.

Primeiro, crie um botão simples no seu HTML:

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

Em seguida, adicione um pouco de CSS básico para estilizar o botão:

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

Agora, adicione JavaScript para criar a animação de clique:

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

button.addEventListener('click', function() {
  // Adiciona uma classe para o efeito de clique
  button.classList.add('button-clicked');
  
  // Remove a classe após a conclusão da animação
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Finalmente, adicione o CSS para o efeito de animação:

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

Ao ser clicado, o botão agora irá encolher levemente e mudar de cor, fornecendo feedback visual ao usuário.

Desafio

Fácil

Quando o botão for clicado, adicione a classe CSS "button-clicked" a ele para feedback visual.

Adicione a linha que aplica esta classe dentro do event listener de clique.

Experimente você mesmo

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