Skip to main content
Creative Coding Projects

Will You Be My Valentine? — Interactive Website with HTML, CSS & JavaScript

Create the iconic "Will You Be My Valentine?" interactive website with a dodging No button, heart animations, and confetti celebrations.

G

gs_admin

Author & Reviewer

Published

Jul 16, 2026

Read Time

12 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

The classic "Will You Be My Valentine?" website where the "No" button dodges the cursor every time they try to click it, the "Yes" button grows bigger with each dodge, and clicking "Yes" triggers a massive confetti celebration! 🎉

---

🔗 Live Demo

👉 Try the Live Demo →

---

📦 Get the Source Code

> ☕ Download on Buy Me a Coffee → > > Includes: 5 theme variants • Music support • Custom message • Photo integration

---

🛠️ The Dodging "No" Button — Core Logic

This is the heart of the project. When the user hovers over "No", it teleports to a random position:

javascript
123456789101112131415161718192021222324252627282930313233 
let noCount = 0;
const noMessages = [
    "Are you sure? 🥺",
    "Please reconsider... 😢", 
    "Don't do this to me! 💔",
    "I'll cry... 😭",
    "Pretty please? 🙏",
    "I'll share my fries with you! 🍟"
];

function dodgeNo() {
    const btn = document.getElementById('noBtn');
    
    // Random position
    const x = Math.random() * (window.innerWidth - 120);
    const y = Math.random() * (window.innerHeight - 50);
    btn.style.position = 'fixed';
    btn.style.left = x + 'px';
    btn.style.top = y + 'px';
    
    // Shrink No button
    btn.style.transform = `scale(${Math.max(1 - noCount * 0.1, 0.2)})`;
    
    // Grow Yes button
    const yesBtn = document.getElementById('yesBtn');
    yesBtn.style.fontSize = Math.min(1.2 + noCount * 0.15, 2.5) + 'rem';
    
    // Show funny message
    document.getElementById('msg').textContent = 
        noMessages[Math.min(noCount, noMessages.length - 1)];
    
    noCount++;
}

CSS Floating Hearts

css
12345678910111213 
.heart {
    position: fixed;
    color: #ff4d6d;
    font-size: 20px;
    opacity: 0.6;
    animation: heartFloat linear infinite;
    pointer-events: none;
}

@keyframes heartFloat {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0.6; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
javascript
12345678910 
function spawnHeart() {
    const h = document.createElement('div');
    h.className = 'heart';
    h.textContent = ['❤️','💕','💖','💝'][Math.floor(Math.random()*4)];
    h.style.left = Math.random() * 100 + '%';
    h.style.animationDuration = (4 + Math.random() * 6) + 's';
    document.body.appendChild(h);
    setTimeout(() => h.remove(), 10000);
}
setInterval(spawnHeart, 2000);

The "Yes" Celebration

javascript
1234567891011121314 
function sayYes() {
    // Hide question, show celebration
    document.getElementById('question').style.display = 'none';
    document.getElementById('celebration').classList.add('active');
    
    // Confetti burst
    for (let i = 0; i < 200; i++) {
        particles.push(new Particle(
            canvas.width / 2,
            canvas.height * 0.5
        ));
    }
    animateConfetti();
}

---

🎨 Customization

WhatHow
Change the questionEdit the <h1> text
Change dodge messagesEdit the noMessages array
Change colorsModify CSS gradient values
Add musicAdd <audio> tag, play on "Yes" click
Add your photoReplace the bear emoji with an <img>

---

🔗 Related

G

About the Author: gs_admin

A senior technical contributor specializing in architectural designs, software optimization, database structures, and developer education. Passionate about writing clean code and sharing engineering knowledge.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026