Valentine Prank Card

admin1234
Feb 08, 2026 10
Live Preview

Live Editor

<div class="card" id="card">
  <h2>💖 Will you be my Valentine?</h2>
  <p>I promise unlimited chocolates 🍫</p>

  <div class="actions">
    <button id="yes">YES ❤️</button>
    <button id="no">NO 😒</button>
  </div>

  <div class="result" id="result">Yay! 💕 I knew it 😍</div>
</div>
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ff5f9e,#ff8fb1);
  font-family:"Poppins",system-ui;
  overflow:hidden;
}

.card{
  width:300px;
  padding:28px 20px 36px;
  background:#fff;
  border-radius:22px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  position:relative;
}

.card h2{
  margin:0 0 10px;
  font-size:22px;
  color:#111;
}

.card p{
  font-size:14px;
  color:#555;
  margin-bottom:22px;
}

.actions{
  position:relative;
  height:60px;
}

button{
  padding:10px 22px;
  border:none;
  border-radius:30px;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
}

#yes{
  background:#ff4d6d;
  color:#fff;
}

#yes:hover{ transform:scale(1.05); }

#no{
  position:absolute;
  background:#e5e7eb;
  color:#111;
  left:160px;
  top:10px;
}

.result{
  margin-top:14px;
  font-size:16px;
  color:#ff2d55;
  display:none;
}

/* 💖 Heart particles */
.heart{
  position:fixed;
  font-size:18px;
  pointer-events:none;
  animation:float 1.4s ease-out forwards;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

@keyframes float{
  0%{
    transform:translate(0,0) scale(1);
    opacity:1;
  }
  100%{
    transform:
      translate(var(--x), var(--y))
      scale(1.6) rotate(20deg);
    opacity:0;
  }
}
const noBtn = document.getElementById("no");
const card = document.getElementById("card");
const yesBtn = document.getElementById("yes");
const result = document.getElementById("result");

/* NO runs away */
noBtn.addEventListener("mouseenter", ()=>{
  const c = card.getBoundingClientRect();
  const b = noBtn.getBoundingClientRect();

  const x = Math.random() * (c.width - b.width);
  const y = Math.random() * (c.height - b.height - 40);

  noBtn.style.left = x + "px";
  noBtn.style.top = y + "px";
});

/* 💥 Hearts burst on YES */
yesBtn.addEventListener("click", ()=>{
  result.style.display = "block";
  noBtn.style.display = "none";
  yesBtn.style.background = "#22c55e";
  yesBtn.textContent = "YAY 💍";

  burstHearts(28);
});

function burstHearts(count){
  const rect = yesBtn.getBoundingClientRect();

  for(let i=0;i<count;i++){
    const heart = document.createElement("div");
    heart.className = "heart";
    heart.textContent = "❤️";

    const x = (Math.random()*200 - 100) + "px";
    const y = (Math.random()*-220 - 40) + "px";

    heart.style.left = rect.left + rect.width/2 + "px";
    heart.style.top  = rect.top + rect.height/2 + "px";
    heart.style.setProperty("--x", x);
    heart.style.setProperty("--y", y);
    heart.style.fontSize = 14 + Math.random()*16 + "px";

    document.body.appendChild(heart);
    setTimeout(()=>heart.remove(),1400);
  }
}
Categories

Valentine Prank Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
