DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Valentine Prank Card - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Valentine Prank Card
admin1234
Feb 08, 2026
10
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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; } }
1
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); } }
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!