Button click animations

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 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 click:

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

button.addEventListener('click', function() {
  // Add a class for the click effect
  button.classList.add('button-clicked');
  
  // Remove the class after animation completes
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

Por fim, adicione o CSS para o animation effect:

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