eu gostaria de saber como crio um botao, chamado "nao", por exemplo, que toda vez que eu chego com o cursor do mouse perto do botao, o mesmo vai para outro lugar da pagina.
Solucionado
eu gostaria de saber como crio um botao, chamado "nao", por exemplo, que toda vez que eu chego com o cursor do mouse perto do botao, o mesmo vai para outro lugar da pagina.
hoje, com a Alura e o Google Gemini
Fala Gustavo!
Segue o código que eu pensei:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 115px 200px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<button class="button" onmouseover="moveButton(this)">Nao</button>
<script>
function moveButton(x) {
marginX = Math.floor(Math.random()*600)
marginY = Math.floor(Math.random()*600)
x.style.margin = marginY.toString() + 'px ' + marginX.toString() + 'px'
}
</script>
</body>
</html>No style, você pode alterar todo o layout do botão. Olha esse site aqui para ver tutoriais e ir ajustando o layout do botão conforme você desejar: https://www.w3schools.com/css/default.asp
No body, você cria um tag < button>, depois coloca o class= e adiciona o estilo configurado... class = "button". E então coloca o evento onmouseover, você pode ver mais sobre ele nesse link: https://www.w3schools.com/tags/ev_onmouseover.asp
O evento onmouseover realiza a função moveButton quando o mouse passa por cima do botão. A função moveButton realiza a seguinte ação:
Abração!
Partiu programar!