[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
Post a Comment