Let’s create a “Do You Love Me?” Animation using HTML, CSS, and JavaScript. This sweet and playful project will ask the classic question with a touch of fun and interactivity — perfect for Valentine’s Day or just a lighthearted web project.
We’ll use:
- HTML to structure the question and buttons (Yes/No).
- CSS for styling and adding animations like bouncing hearts, glowing buttons, and cute transitions.
- JavaScript to handle user responses, animate reactions, and maybe trigger a cute surprise when “Yes” is clicked!
Whether you’re new to coding or just want a fun challenge, this project is a lovely way to practice interactive UI, animations, and creative logic.
HTML :
This HTML code creates a playful love question webpage that asks, “Do you love me?” with two buttons — “Yes” and “No.” A looping video plays behind the question, and when “Yes” is clicked, a second video with a happy message (“I knew it😍!”) is shown. It also includes animated heart visuals styled via CSS and interactive behavior handled by an external JavaScript file (do_you_love_me.js).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="do_you_love_me.css" />
<title>Do you love me?</title>
</head>
<body>
<div class="question-container container">
<video class="local-gif" src="Reply me love.mp4" autoplay muted loop></video>
<h2 class="question">Do you love me?</h2>
<div class="button-container">
<button class="yes-btn btn js-yes-btn">Yes</button>
<button class="no-btn btn js-no-btn">No</button>
</div>
</div>
<div class="result-container container">
<video class="gif-result" src="Love me.mp4" autoplay loop></video>
<h2>I knew it😍!</h2>
</div>
<div class="cssload-main">
<div class="cssload-heart">
<span class="cssload-heartL"></span>
<span class="cssload-heartR"></span>
<span class="cssload-square"></span>
</div>
<div class="cssload-shadow"></div>
</div>
<script src="do_you_love_me.js"></script>
</body>
</html>CSS :
This CSS styles a romantic web page with a centered layout, soft pink background, and playful buttons. It makes the “Do you love me?” question look cute and interactive with styled videos, hover animations, and a heart loader animation built from shapes (circles and squares) that rotate, scale, and animate using keyframes to simulate a beating heart. The design is responsive, animated, and visually engaging for a fun user experience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: grid;
justify-content: center;
align-items: center;
background-color: #ffe6e9;
font-family: "Quicksand", sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-100%, -50%);
transition: 0.2s;
}
.question-container {
position: absolute;
top: 40%;
left: 50%;
transition: 0.2s;
}
.local-gif {
width: 100%;
max-width: 300px;
border-radius: 10px;
display: block;
margin: 0 auto 3rem auto;
pointer-events: none;
}
.question {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.button-container {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.btn {
position: absolute;
border: none;
border-radius: 50px;
padding: 10px 20px;
font-family: "Poppins", sans-serif;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #ff6b81;
color: white;
transform: scale(1.05);
box-shadow: 0px 4px 15px rgba(255, 107, 129, 0.5);
}
.btn:hover {
background-color: #ffa4b1;
transform: scale(1.1);
box-shadow: 0px 6px 20px rgba(255, 107, 129, 0.7);
text-shadow: 1px 1px 5px rgba(255, 182, 193, 0.8);
}
.yes-btn {
right: 54%;
}
.no-btn {
left: 54%;
}
.result-container {
display: none;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-100%, -50%);
transition: 0.2s;
}
.gif-result {
border-radius: 10px;
margin-bottom: 2rem;
}
.result-container h2 {
font-size: 3.2rem;
text-align: center;
}
/* heart loader */
.cssload-main {
display: none;
position: absolute;
content: "";
top: 17%;
left: 50%;
margin: 200px auto 0 auto;
transform: translate(-100%, -50%);
-o-transform: translate(-100%, -240%);
-ms-transform: translate(-100%, -240%);
-webkit-transform: translate(-100%, -240%);
-moz-transform: translate(-100%, -240%);
}
.cssload-main * {
font-size: 62px;
}
.cssload-heart {
animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
-o-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-ms-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-webkit-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-moz-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
top: 50%;
content: "";
left: 50%;
position: absolute;
}
.cssload-heartL {
width: 1em;
height: 1em;
border: 1px solid #ff0000;
background-color: #ff0000;
content: "";
position: absolute;
display: block;
border-radius: 100%;
animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
-o-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-ms-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-webkit-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-moz-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
transform: translate(-28px, -27px);
-o-transform: translate(-28px, -27px);
-ms-transform: translate(-28px, -27px);
-webkit-transform: translate(-28px, -27px);
-moz-transform: translate(-28px, -27px);
}
.cssload-heartR {
width: 1em;
height: 1em;
border: 1px solid #ff0000;
background-color: #ff0000;
content: "";
position: absolute;
display: block;
border-radius: 100%;
transform: translate(28px, -27px);
-o-transform: translate(28px, -27px);
-ms-transform: translate(28px, -27px);
-webkit-transform: translate(28px, -27px);
-moz-transform: translate(28px, -27px);
animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
-o-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-ms-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-webkit-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-moz-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
}
.cssload-square {
width: 1em;
height: 1em;
border: 1px solid #ff0000;
background-color: #ff0000;
position: relative;
display: block;
content: "";
transform: scale(1) rotate(-45deg);
-o-transform: scale(1) rotate(-45deg);
-ms-transform: scale(1) rotate(-45deg);
-webkit-transform: scale(1) rotate(-45deg);
-moz-transform: scale(1) rotate(-45deg);
animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
-o-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-ms-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-webkit-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-moz-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
}
.cssload-shadow {
top: 97px;
left: 50%;
content: "";
position: relative;
display: block;
bottom: -0.5em;
width: 1em;
height: 0.24em;
background-color: rgb(215, 215, 215);
border: 1px solid rgb(215, 215, 215);
border-radius: 50%;
animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
-o-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-ms-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-webkit-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
-moz-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite
normal;
}
@keyframes cssload-square {
50% {
border-radius: 100%;
transform: scale(0.5) rotate(-45deg);
}
100% {
transform: scale(1) rotate(-45deg);
}
}
@-o-keyframes cssload-square {
50% {
border-radius: 100%;
-o-transform: scale(0.5) rotate(-45deg);
}
100% {
-o-transform: scale(1) rotate(-45deg);
}
}
@-ms-keyframes cssload-square {
50% {
border-radius: 100%;
-ms-transform: scale(0.5) rotate(-45deg);
}
100% {
-ms-transform: scale(1) rotate(-45deg);
}
}
@-webkit-keyframes cssload-square {
50% {
border-radius: 100%;
-webkit-transform: scale(0.5) rotate(-45deg);
}
100% {
-webkit-transform: scale(1) rotate(-45deg);
}
}
@-moz-keyframes cssload-square {
50% {
border-radius: 100%;
-moz-transform: scale(0.5) rotate(-45deg);
}
100% {
-moz-transform: scale(1) rotate(-45deg);
}
}
@keyframes cssload-heart {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(720deg);
}
}
@-o-keyframes cssload-heart {
50% {
-o-transform: rotate(360deg);
}
100% {
-o-transform: rotate(720deg);
}
}
@-ms-keyframes cssload-heart {
50% {
-ms-transform: rotate(360deg);
}
100% {
-ms-transform: rotate(720deg);
}
}
@-webkit-keyframes cssload-heart {
50% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(720deg);
}
}
@-moz-keyframes cssload-heart {
50% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(720deg);
}
}
@keyframes cssload-heartL {
60% {
transform: scale(0.4);
}
}
@-o-keyframes cssload-heartL {
60% {
-o-transform: scale(0.4);
}
}
@-ms-keyframes cssload-heartL {
60% {
-ms-transform: scale(0.4);
}
}
@-webkit-keyframes cssload-heartL {
60% {
-webkit-transform: scale(0.4);
}
}
@-moz-keyframes cssload-heartL {
60% {
-moz-transform: scale(0.4);
}
}
@keyframes cssload-heartR {
40% {
transform: scale(0.4);
}
}
@-o-keyframes cssload-heartR {
40% {
-o-transform: scale(0.4);
}
}
@-ms-keyframes cssload-heartR {
40% {
-ms-transform: scale(0.4);
}
}
@-webkit-keyframes cssload-heartR {
40% {
-webkit-transform: scale(0.4);
}
}
@-moz-keyframes cssload-heartR {
40% {
-moz-transform: scale(0.4);
}
}
@keyframes cssload-shadow {
50% {
transform: scale(0.5);
border-color: rgb(228, 228, 228);
}
}
@-o-keyframes cssload-shadow {
50% {
-o-transform: scale(0.5);
border-color: rgb(228, 228, 228);
}
}
@-ms-keyframes cssload-shadow {
50% {
-ms-transform: scale(0.5);
border-color: rgb(228, 228, 228);
}
}
@-webkit-keyframes cssload-shadow {
50% {
-webkit-transform: scale(0.5);
border-color: rgb(228, 228, 228);
}
}
@-moz-keyframes cssload-shadow {
50% {
-moz-transform: scale(0.5);
border-color: rgb(228, 228, 228);
}
}
JavaScript:
This JavaScript makes the “No” button dodge the user’s mouse by moving to random positions on hover, making it hard to click. When the “Yes” button is clicked, it hides the question, shows a heart-loading animation for 3 seconds, and then displays a result message with a video saying “I knew it😍!” — creating a playful and romantic interaction.
const questionContainer = document.querySelector(".question-container");
const resultContainer = document.querySelector(".result-container");
const gifResult = document.querySelector(".gif-result");
const heartLoader = document.querySelector(".cssload-main");
const yesBtn = document.querySelector(".js-yes-btn");
const noBtn = document.querySelector(".js-no-btn");
// /change the postion of no button
noBtn.addEventListener("mouseover", () => {
const newX = Math.floor(Math.random() * questionContainer.offsetWidth);
const newY = Math.floor(Math.random() * questionContainer.offsetWidth);
noBtn.style.left = `${newX}px`;
noBtn.style.top = `${newY}px`;
});
// yes button functionality
yesBtn.addEventListener("click", () => {
questionContainer.style.display = "none";
heartLoader.style.display = "inherit";
const timeoutId = setTimeout(() => {
heartLoader.style.display = "none";
resultContainer.style.display = "inherit";
gifResult.play();
}, 3000);
});
In conclusion, building a “Do You Love Me?” Animation using HTML, CSS, and JavaScript is a fun and creative way to learn web development. With playful buttons, heart animations, and interactive logic, this mini-project adds charm and personality to your web design skills. Let’s keep making the web a little more lovable! 💖😊
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
