Project Demo
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Button, If you can.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="catchMe">Catch Me</button>
<script src="script.js"></script>
</body>
</html>
CSS CODE
body {
display: flex;
justify-content: center;
place-items: center;
min-height: 90vh;
background: #e8e8e8;
overflow: hidden;
}
#catchMe {
all: unset;
position: absolute;
padding: 10px;
width: 80px;
text-align: center;
background: #006eff;
border-radius: 7px;
color: #fff;
font-weight: 600;
font-family: 'Consolas', sans-serif;
transition: .2s;
cursor: pointer;
}
JAVASCRIPT CODE
const btn = document.getElementById("catchMe");
btn.addEventListener("mouseover", () => {
const vw = window.innerWidth - btn.offsetWidth;
const vh = window.innerHeight - btn.offsetHeight;
btn.style.left = Math.random() * vw + "px";
btn.style.top = Math.random() * vh + "px";
});
