Animações ao clicar em botões

Parte da seção JavaScript em Ação 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 quicar. Podemos acionar 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 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() {
  // Adicione uma classe para o efeito de clique
  button.classList.add('button-clicked');
  
  // Remova a classe após a animação ser concluída
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Por fim, adicione o CSS para o efeito de animação:

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

Quando clicado, o botão agora 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 fornecer feedback visual.

Adicione a linha que aplica essa classe dentro do listener de evento 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>