index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="contaner">
        <h1>Do you wanna go out with me?</h1>

        <div>
            <img src="giphy.gif">
        </div>
        <div class="buttons">
        
            <button class="btn" id="yesButton" onclick="nextPage()">Yes</button>
            <button class="btn" id="noButton" onmouseover="moveButton()">No</button>
        
            <script>
        
                function nextPage(){
        
                    window. location.href="yes.html";
                }
        
                function moveButton() {

                    var x = Math.random() * (window.innerWidth - document.getElementById('noButton').offsetWidth);
                    var y = Math.random() * (window.innerHeight - document.getElementById('noButton').offsetHeight);
                    document.getElementById('noButton').style.left = `${x}px`;
                    document.getElementById('noButton').style.top = `${y}px`;
                }
        
            </script>
        
        </div>
    </div>

    
    
</body>
</html>