Back to Components
Valentine Interactive Yes / No Button Animation
Component

Valentine Interactive Yes / No Button Animation

CodewithLord
February 8, 2026

A fun and interactive Valentine UI where the No button runs away and the Yes button wins hearts. Perfect for reels, shorts, and beginner DOM practice.

❤️ Description

This Valentine project is a playful interactive UI where users are asked a simple question:

"Will you be my Valentine?"

  • Clicking No makes the button dodge the cursor 🏃‍♂️
  • Clicking Yes fills the screen with love 💖

Perfect for:

  • Instagram / YouTube Shorts
  • Beginner JavaScript practice
  • Fun portfolio additions

🧠 Core Concept

This project demonstrates:

  • DOM manipulation
  • Mouse events
  • Button positioning logic
  • Simple animations using CSS

No libraries. Pure HTML + CSS + JavaScript.


🧩 Complete Code (HTML + CSS + JS)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Will You Be My Valentine?</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="container">
11        <div class="gif_container">
12            <img src="https://gifdb.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif" alt="Cute GIF">
13        </div>
14        <h1>Will you be my Valentine?</h1>
15        <div class="buttons">
16            <button class="yes-button" onclick="handleYesClick()">Yes</button>
17            <button class="no-button" onclick="handleNoClick()">No</button>
18        </div>
19        
20    </div>
21    <script src="script.js"></script>
22</body>
23</html>


CSS Code


1@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2
3body {
4    display: flex;
5    justify-content: center;
6    align-items: center;
7    height: 100vh;
8    margin: 0;
9    background-color: white;
10    font-family: "Nunito", sans-serif;
11    flex-direction: column;
12  }
13  
14  .container {
15    text-align: center;
16  }
17  
18  h1 {
19    font-size: 2.5em;
20    color: #d32f2f;
21  }
22  
23  .buttons {
24    margin-top: 20px;
25  }
26  
27  .yes-button {
28    font-size: 1.5em;
29    padding: 10px 20px;
30    margin-right: 10px;
31    background-color: #fa0561;
32    color: white;
33    border: none;
34    border-radius: 5px;
35    cursor: pointer;
36  }
37
38  .yes-button:hover{
39    background-color: #e03777;
40  }
41  
42  .no-button {
43    font-size: 1.5em;
44    padding: 10px 20px;
45    background-color: #d3d3d3;
46    color: black
47    ;
48    border: none;
49    border-radius: 5px;
50    cursor: pointer;
51  }
52  
53  .gif_container img {
54    width: 300px;
55    height: auto;
56    border-radius: 10px;
57    margin-top: 20px;
58  }

Javascript Code


1const messages = [
2    "Are you sure?",
3    "Really sure??",
4    "Are you positive?",
5    "Pookie please...",
6    "Just think about it!",
7    "If you say no, I will be really sad...",
8    "I will be very sad...",
9    "I will be very very very sad...",
10    "Ok fine, I will stop asking...",
11    "Just kidding, say yes please! ❤️"
12];
13
14let messageIndex = 0;
15
16function handleNoClick() {
17    const noButton = document.querySelector('.no-button');
18    const yesButton = document.querySelector('.yes-button');
19    noButton.textContent = messages[messageIndex];
20    messageIndex = (messageIndex + 1) % messages.length;
21    const currentSize = parseFloat(window.getComputedStyle(yesButton).fontSize);
22    yesButton.style.fontSize = `${currentSize * 1.5}px`;
23}
24
25function handleYesClick() {
26    window.location.href = "yes_page.html";
27}

Yes_Page.html Code


1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Knew you would say yes!</title>
7    <link rel="stylesheet" href="./yes_style.css">
8</head>
9<body>
10    <div class="container">
11        <h1 class="header_text">Knew you would say yes!</h1>
12        <div class="gif_container">
13            <img src="https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif">
14        </div>
15    </div>
16</body>
17</html>

Yes_style.css code


1@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2
3
4body {
5    display: flex;
6    justify-content: center;
7    align-items: center;
8    height: 100vh;
9    margin: 0;
10    background-color: white;
11    font-family: "Nunito", sans-serif;
12}
13
14.container {
15    text-align: center;
16}
17
18.header_text {
19    font-size: 3em;
20    color: #d32f2f;
21}
22
23.gif_container img {
24    width: 300px; 
25    max-width: 500px; 
26    height: auto; 
27}
28

🧱 HTML & CSS Breakdown

HTML

  • .card → main UI container
  • Two buttons: Yes and No
  • .hearts → container for floating hearts

CSS

  • Gradient background for romantic feel
  • Rounded card with soft shadow
  • position:absolute on No button for movement
  • Floating hearts animation using @keyframes

⚙️ JavaScript Logic Explained

🏃 No Button Movement

  • Triggered on mouseover
  • Random X and Y position calculated
  • Button jumps to a new location instantly

💖 Yes Button Effect

  • On click, multiple heart elements are created
  • Random position + animation duration
  • Hearts float upward and disappear

🎯 Why This Project Works

  • High engagement (user interaction)
  • Funny + emotional
  • Perfect for short-form content
  • Very beginner-friendly

🚀 Ideas to Extend

  • Add sound effect on Yes
  • Replace text with emojis
  • Convert to React component
  • Add confetti instead of hearts

Happy Coding ❤️

teddy bear teddy Bear 2

Love this component?

Explore more components and build amazing UIs.

View All Components