como eu crio um botao no html que troca de lugar | Lógica de programação

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:

gera números aleatórios para a margin esquerda e direita;
gera números aleatórios para a margin de cima e de baixo;
Pega esses números aletórios e altera no atributo margin do < style>.

Abração!

Partiu programar!