Botón huidizo
Solución
<script>
function init(){
let si = document.getElementById('si');
let no = document.getElementById('no');
no.addEventListener('mouseover', saltar);
}
function nuevaPos(pos, max, incr){
let salto = Math.round((Math.random()+1)*incr);
let signo = Math.random() > 0.5 ? 1:-1;
salto = signo*salto;
if (pos + salto >= max || pos + salto <= 0){
pos -= salto;
}else{
pos += salto;
}
return pos;
}
function saltar(evt){
let incX = 120, incY = 30;
let maxX = window.innerWidth - incX;
let maxY = window.innerHeight - incY;
let btn = evt.currentTarget;
let posX = btn.offsetLeft;
let posY = btn.offsetTop;
posX = nuevaPos(posX, maxX, incX);
posY = nuevaPos(posY, maxY, incY);
evt.currentTarget.style.left = posX+'px';
evt.currentTarget.style.top = posY+'px'
}
</script>
<style>
.boton{
border:1px solid red;
color: white;
background: red;
display:block;
text-align: center;
width: 120px;
height: 30px;
line-height: 30px;
position: absolute;
z-index: 2;
}
</style>
<body onload="init()">
<div class="boton" id="si" style= "top: 50%; left: 50%">Si</div>
<div class="boton" id="no" style= "top: 50%; left: 40%">No</div>
</body>
Explicación
Este botón va a saltar al acercarle el ratón.
Se define un gestor de eventos para el evento mouseover, cuando el ratón está sobre el botón (onmouseover) se invoca la función saltar().
Esta función mueve el ratón a una nueva posición limitada con las dimensiones de la pantalla. Si quieres limitarlo a un cuadro dentro de la misma puedes usar un contenedor con position:relative. Ahora el contenedor es body.
El desplazamiento se calcula de forma aleatoria con Math.random(). El mínimo es el ancho o alto del botón y el máximo el doble de este valor.
Estos anchos o altos son, como mínimo, están definidos en la regla de estilo.