Animated Button - Using HTML and CSS

This article is informative to all front end web designers. As a front end developer or designer, we always confused about not making a design that results in a boring page. The very small creativity makes our page so attractive.

Today, in this article, we will see how can we make an attractive button using HTML and CSS3 that will make your page much more attractive and happy clients.

Here, I'm creating two files named "button.html" and "button.css". You can change the file name whatever you want.

Demo -

Code:

button.html

<!DOCTYPE html>
<html>
<head><title> Animation Button</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="button.css">
</head>
<body>
		<a href="#"> 
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<b>Button<b> 
		</a>

</body>
</html>

button.css

html, body {
	margin: 0;
	padding: 0;
	background: #FF6600;
	font-family: sans serif;
}
a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-size: 30px;
	letter-spacing: 2px;
	padding: 30px 60px;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 20px 50px rgba(0,0,0,0.7);
	overflow: hidden;
}
a:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	width: 50%;
	background: rgba(255,255,255,0.05);
}
a span:nth-child(1) {
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, #0c002b, #1779ff);
	animation: animate1 2s linear infinite;
}
@keyframes  animate1 {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}
a span:nth-child(2) {
	position: absolute;
	top:0px;
	right: 0px;
	width: 2px; 
	height: 100%;
	background: linear-gradient(to bottom, #0c002b, #1779ff);
	animation: animate2 2s linear infinite;
	animation-delay: 1s;
}
@keyframes  animate2 {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}
a span:nth-child(3) {
	position: absolute;
	bottom:0px;
	right: 0px;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left, #0c002b, #1779ff);
	animation: animate3 2s linear infinite;
}
@keyframes  animate3 {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
a span:nth-child(4) {
	position: absolute;
	top:0px;
	left: 0px;
	width: 2px;
	height: 100%;
	background: linear-gradient(to top, #0c002b, #1779ff);
	animation: animate4 2s linear infinite;
	animation-delay: 1s;
}
@keyframes  animate4 {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}

Hope you liked it. Also, visit designing article like this - Animated Balloon

If you really like this💯, then follow🌈 me by Clicking Follow💥 button next to comment section.🤩🥰

Stay Connect with me 😃

Thank you 💙😇

Animated Button - Using HTML and CSS

Contact Form