Top Digital Marketing Agency in Dhrangadhra | Website Development & Designing – Netbyzz

+91 91067 67818

#A013
Button Animation

HTML :

<!-- CODE = #A013 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>NETBYZZ A013</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXeCuyCrXqUp_lKKOQ23p0Gf-6lqEykPMotKnJmhARRZ8YNAAjt-RI-Vb9XXhyXdrTQYjxMcGL9m3nHKpxSyF287emuYWYUxGBc9LJkMgzsjBUZ3x4O0o_W7NtbiZReTFcqU8iIx_AGf-FweRHztB5-e0eXDiHTXUcvS35VcIsnlwMAsFNHk_r_DUjUKo/s1000/Netbyzz3.png" alt="Netbyzz Logo" class="Netbyzz">
	<div class="container">
		<div class="love">
			<h2>Are u <span>love</span> me ?</h2>
			<a id="no" href="A013no.html">No</a>
			<a id="yes" href="A013yes.html">Yes</a>
		</div>
	</div>
</body>
</html>

CSS :

*{
	padding: 0;
	margin: 0;
	outline:0;
}
.Netbyzz {
	margin-left: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 50%; /* Adjust the size of the logo */
	opacity: 5%;
	}
	body{
		background: pink;
	}
.container{
	height: 100vh;
	width: 100vw;
	text-align:center;
	color:#333;
}
.love,.yes,.no{padding-top: 15%;
		
		}
.love span{color:red;}
h2{font-size: 72px;margin-bottom: 20px;}
a{font-size: 24px;text-decoration: none;padding: 5px 10px;
	margin-top: 20px;border:3px solid #ddd; border-radius: 10px;}
#no{color:red; background: #eee;margin-right: 50px;}
#yes{color:green;background: #eee;}

.yes img{
	height: 30px;
	width: 30px;
	animation: image 4s linear infinite;
}
@keyframes image{
	0%{transform: scale(.5);}
	50%{transform: scale(1.5);}
	100%{transform: scale(.5);}
}

A013yes.html :

<!-- CODE = #A013 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>NETBYZZ A013</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXeCuyCrXqUp_lKKOQ23p0Gf-6lqEykPMotKnJmhARRZ8YNAAjt-RI-Vb9XXhyXdrTQYjxMcGL9m3nHKpxSyF287emuYWYUxGBc9LJkMgzsjBUZ3x4O0o_W7NtbiZReTFcqU8iIx_AGf-FweRHztB5-e0eXDiHTXUcvS35VcIsnlwMAsFNHk_r_DUjUKo/s1000/Netbyzz3.png" alt="Netbyzz Logo" class="Netbyzz">
	<div class="container">
		<div class="yes">
			<h2>I L<img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt="">ve U T<img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt=""><img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt=""></h2>
		</div>
	</div>
</body>
</html>
 

A013no.html :

<!-- CODE = #A013 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>NETBYZZ A013</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXeCuyCrXqUp_lKKOQ23p0Gf-6lqEykPMotKnJmhARRZ8YNAAjt-RI-Vb9XXhyXdrTQYjxMcGL9m3nHKpxSyF287emuYWYUxGBc9LJkMgzsjBUZ3x4O0o_W7NtbiZReTFcqU8iIx_AGf-FweRHztB5-e0eXDiHTXUcvS35VcIsnlwMAsFNHk_r_DUjUKo/s1000/Netbyzz3.png" alt="Netbyzz Logo" class="Netbyzz">
	<div class="container">
		<div class="yes">
			<h2>I am waitting for u untill alive</h2>
			<img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt=""><img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt=""><img src="https://i0.wp.com/www.ristorantelecantine.it/wp-content/uploads/2019/02/kisspng-love-heart-love-heart-romance-clip-art-picture-of-red-heart-5aaeb718420cb8.8640685015213995762706.png?fit=600%2C534&ssl=1" alt="">
		</div>
	</div>
</body>
</html>
 
 

Source Code

Download Now