Animated Search Box with HTML CSS

Hello Friends, in this blog, we will create a simple CSS animation snippet, based on the search bar or search box. Here we will learn how to create an animated search box using HTML and CSS. The Search bar or Search box is a segment of a website that allows the user to search a particular content of a website. Here I have used CSS transition for increasing the width of the search box on hover. No JavaScript or jQuery was used for this snippet.

VIDEO TUTORIAL:

Animated Search Box with HTML CSS [ Source Code ]:

Please copy the code below and paste them into your HTML and CSS file and save them.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Animated Search Bar with html and css</title>
	<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper c-height">
		<div class="search-area c-height">
			<div class="single-search">
				<input class="custom-input" name="" placeholder="What are you looking for ..." type="text"> <a class="icon-area" href="#"><i class="fa fa-search"></i></a>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #262626 !important;
}
.single-search {
	margin-bottom: auto;
	margin-top: auto;
	height: 40px;
	background-color: #fafafa;
	border-radius: 30px;
	padding: 10px;
}
.search-area {
	display: flex;
	justify-content: center;
}
.c-height {
	height: 100%;
}
.custom-input {
	border: 0;
	outline: 0;
	width: 0;
	line-height: 40px;
	transition: width 0.4s linear;
}
input::placeholder {
	color: #262626;
	font-size: 20px;
}
.single-search:hover>.custom-input {
	padding: 0 10px;
	width: 500px;
	caret-color: #262626;
	transition: width 0.4s linear;
}
.single-search:hover>.icon-area {
	background: white;
	color: #262626;
}
.icon-area {
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	float: right;
	display: flex;
	text-decoration: none;
	color: #262626;
}

Thank you for visiting the Blog.

Post a Comment

Post a Comment

About Us

Contact Form

Animated Search Box with HTML CSS

You might like

Post a Comment

Post a Comment

Contact Form