[TUTORIAL] JavaScript para criar um botão com efeito pulante

Claro! Aqui está um tutorial simples de JavaScript para criar um botão com efeito pulante:


Passo 1: Crie o HTML básico


Comece criando um arquivo HTML e adicione o seguinte código:


```html

<!DOCTYPE html>

<html>

<head>

  <title>Botão Pulante</title>

  <style>

    .pulante {

      position: relative;

      animation: pulo 0.5s infinite alternate;

    }

    

    @keyframes pulo {

      0% { top: 0; }

      100% { top: -10px; }

    }

  </style>

</head>

<body>

  <button id="meuBotao" onclick="pular()">Clique Aqui!</button>


  <script src="script.js"></script>

</body>

</html>

```


Neste exemplo, temos um botão com o ID "meuBotao" e uma classe CSS chamada "pulante". Também adicionamos uma animação de CSS para fazer o botão pular quando o efeito for ativado.


Passo 2: Crie o JavaScript para adicionar o efeito pulante


Crie um novo arquivo chamado "script.js" e adicione o seguinte código JavaScript:


```javascript

function pular() {

  var botao = document.getElementById("meuBotao");

  botao.classList.add("pulante");

  

  setTimeout(function() {

    botao.classList.remove("pulante");

  }, 1000);

}

```


Nesse código JavaScript, temos uma função chamada "pular" que é acionada quando o botão é clicado. Primeiro, pegamos o elemento do botão usando `getElementById`. Em seguida, adicionamos a classe "pulante" ao botão usando `classList.add`, o que inicia a animação CSS.


Por fim, usamos `setTimeout` para remover a classe "pulante" após 1 segundo (1000 milissegundos), assim o botão para de pular.


Passo 3: Visualize o resultado


Salve todos os arquivos (HTML e JavaScript) na mesma pasta e abra o arquivo HTML em um navegador da web. Quando você clicar no botão, ele deve começar a pular!


Agora você tem um botão com um efeito pulante simples usando JavaScript e CSS. Você pode personalizar ainda mais a aparência e a animação do botão ajustando o estilo CSS.


Experimente e divirta-se adicionando mais interatividade ao seu site usando JavaScript!

Comments