← Código
Hablemos →
El botón que no te deja decir que no
Pasas el ratón (o el dedo) por encima de «No» y el botón huye a otro sitio de la pantalla. Cuatro líneas de JavaScript, sin librerías.
PARA TU NEGOCIOEncuestas con humor, páginas de San Valentín, «¿te suscribes?» o un 404 divertido: la gente lo intenta, se ríe y lo comparte.
// CÓMO FUNCIONA
- Escuchamos «pointerenter»: salta en cuanto el ratón o el dedo llegan al botón, antes de poder pulsarlo.
- Calculamos un sitio al azar que quepa en la pantalla: ancho de la ventana menos el ancho del botón.
- Lo movemos con transform: translate(), que no descoloca el resto de la página.
- Una transición con rebote (cubic-bezier) hace que el salto se vea gracioso en vez de brusco.
// EL CÓDIGO
// La página entera: guárdala como .html y ábrela en el navegador.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>¿Quieres una web nueva?</title>
<style>
body{margin:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#0B2216,#05070A 70%);color:#E8F5EE;font-family:system-ui,'Segoe UI',sans-serif;text-align:center}
h1{font-size:clamp(30px,8vw,56px);font-weight:900;letter-spacing:-1px;line-height:1.05;margin:0 0 40px}
.botones{display:flex;gap:24px;justify-content:center}
button{font:800 clamp(20px,5vw,30px) system-ui,sans-serif;padding:16px 42px;border-radius:999px;border:0;cursor:pointer}
#si{background:#00FF7F;color:#05070A;box-shadow:0 0 40px #00FF7F66}
#no{background:#2b2f2d;color:#E8F5EE;transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
#ok{font-size:clamp(34px,9vw,64px);font-weight:900;color:#00FF7F;margin-top:34px;opacity:0;transform:scale(.6);transition:.3s}
</style>
</head>
<body>
<div>
<h1>¿Quieres una<br>web nueva?</h1>
<div class="botones"><button id="si">Sí 💚</button><button id="no">No</button></div>
<div id="ok">¡Genial! 🎉</div>
</div>
<script>
// El truco: cuando el puntero (o el dedo) llega a «No», el botón salta a otro sitio de la pantalla
const no = document.querySelector('#no');
no.addEventListener('pointerenter', () => {
const x = Math.random() * (innerWidth - no.offsetWidth) - no.offsetLeft;
const y = Math.random() * (innerHeight - no.offsetHeight) - no.offsetTop;
no.style.transform = `translate(${x}px, ${y}px)`;
});
// Y «Sí» lo celebra
document.querySelector('#si').addEventListener('click', () => {
ok.style.opacity = 1; ok.style.transform = 'scale(1)';
});
</script>
</body>
</html>- Funciona en todos los navegadores modernos, en ordenador y en móvil.
- Sin librerías ni instalaciones.
¿Lo quieres en tu web y no te ves con fuerzas?
En AEWorks lo montamos por ti, junto con lo que necesite tu negocio.