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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.
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!