WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de escape
663
Anes_unk
Abrir en el editor
Publica tu código
Recomendado
27 December 2024
Una página de inicio creada con directorios.
19 November 2024
Mostrar texto al pasar el mouse
13 May 2023
Botón de descarga animado
HTML
Copy
Escape Button
Click And Win 100 $
CSS
Copy
body { background-color: #000; color: white; font-family: 'Arial', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } .button { padding: 20px 40px; font-size: 18px; color: white; background-color: #007BFF; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); position: absolute; } .button:hover { background-color: #0056b3; transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); } .button:active { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } .button-escape { transition: all 0.3s ease-in-out; }
JS
Copy
const button = document.getElementById('escapeButton'); button.addEventListener('mouseover', () => { const maxX = window.innerWidth - button.offsetWidth; const maxY = window.innerHeight - button.offsetHeight; const randomX = Math.random() * maxX; const randomY = Math.random() * maxY; button.style.left = `${randomX}px`; button.style.top = `${randomY}px`; });