Since all of you asking about the source code I posted in my reels. here it is to impress your crush with HTML
<html>
<head>
<title>Hiiiiii</title>
<style>
p {
text-align: center;
font-size: 32px;
font-family: Candara, Oswald;
}
img {
display: block;
margin: auto;
width: 25%;
}
</style>
</head>
<body>
<p>Can we hang out soon?</p>
<img src="https://media.tenor.com/zGm5acSjHCIAAAAM/cat-begging.gif">
</body>
<title>Botões</title>
<style>
#botao1 {
position: fixed;
top: 70%;
left: 55%;
transform: translate(-50%, -50%);
}
#botao2 {
position: absolute;
left: 39%;
top: 68%;
}
</style>
</head>
<body>
<button id="botao1">YES BBY!</button>
<button id="botao2">NO</button>
<script>
const button2 = document.getElementById('botao2');
let left = 40;
button2.addEventListener('mouseover', function() {
if(left == 40){
left = 44;
}else{
left = 40;
}
this.style.left = left + '%';
});
</script>
<script>document.getElementById('botao1').addEventListener('click', function() {
alert('YAYY THANK U 😍❤️');
});
</script>
</body>
</html>How To Run:
Copy and paste the code into an editor or notepad and save it as index.html
Double-click on the file and it will run in your browser
hiiiiii
p {
text-align: center;
font-size: 32px;
font-family: candara, oswald;
}
img {
display: block;
margin: 0 auto;
width: 25%;
}
can we hang out soon?
botões
#botao1 {
position: fixed;
top: 70%;
left: 55%;
transform: translate(-50%, -50%);
}
#botao2 {
position: absolute;
left: 39%;
top: 68%;
}
yes bby!
no
const button2 = document.getelementbyid(‘botao2’);
let left = 40;
button2.addeventlistener(‘mouseover’, function() {
if(left == 40){
left = 44;
}else{
left = 40;
}
this.style.left = left + ‘%’;
});
document.getelementbyid(‘botao1’).addeventlistener(‘click’, function() {
alert(‘yayy thank u 😍❤️’);
});