Do You Love Me? – Fun Interactive Yes/No Button using HTML, CSS & JS

This project is a playful and lighthearted mini web experience asking the classic question: "Do you love me?" But there's a twist — the "No" button escapes the cursor, making it nearly impossible to click, while the "Yes" button sits still, waiting for your answer.

Built using HTML, CSS, and JavaScript, this is perfect for Valentine’s Day pages, romantic proposals, or just for fun!

🧰 Technologies Used:

• HTML5 – For button layout and question text

• CSS3 – Styling, positioning, and transitions

• JavaScript – Detects hover over the "No" button and repositions it randomly

🎯 Features:

• Classic "Do you love me?" question

• Two buttons: Yes and No

• No button dodges the mouse on hover

• Yes button triggers a cute message or animation

• Responsive and lightweight for mobile and desktop

• Funny and unexpected UX — perfect for pranks or cute greetings

🎬 How It Works:

1. The page displays a question with two buttons: Yes and No.

2. When the user tries to hover over the No button, JavaScript triggers a function that randomly moves it elsewhere on the screen:

   
   

   buttonNo.style.left = Math.random() * 80 + "%";

   buttonNo.style.top = Math.random() * 80 + "%";

   
   

3. The Yes button remains in place. When clicked, it displays a sweet message like:

   • “I knew it! 😍”

   • Or triggers a heart animation, confetti, or modal.

🧠 Learning Highlights:

• DOM event listeners (e.g., mouseover, click)

• Dynamically changing style.left and style.top for movement

• Responsive positioning and layout control

• Fun UX patterns and engagement design

🛠 Customization Ideas:

• Add confetti or heart emojis when "Yes" is clicked

• Personalize the question and final message

• Use sound effects for button interaction

• Add a retry loop or auto-play animation