Pure CSS Search Box With Animation Effects

Learn how to create CSS search box using only CSS. Free HTML and CSS Custom create search box. Responsive search box.

I got this code from CodePen. The author’s name is Omar Sherif. The very nice tutorial is very easy to implement on the website. You can change everything as you like. Fully responsive design.

I am providing all code you can just copy all code and use this search box. All source file also available download and use very easily. My previous tutorial how to create CSS Flip Card Animation.

HTML

<div class="searchBox">
	<input class="searchInput" type="text" name="" placeholder="Search">
	<button class="searchButton" href="#">
		<i class="material-icons">search</i>
	</button>
</div>

CSS

body {
	background-image: linear-gradient(to right, #cb2d3e, #ef473a);
}
.searchBox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	background: #2f3640;
	height: 40px;
	border-radius: 40px;
	padding: 10px;
}
.searchBox:hover>.searchInput {
	width: 240px;
	padding: 0 6px;
}
.searchBox:hover>.searchButton {
	background: white;
	color: #2f3640;
}
.searchButton {
	color: white;
	float: right;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #2f3640;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.4s;
	cursor: pointer;
}
.searchInput {
	border: none;
	background: none;
	outline: none;
	float: left;
	padding: 0;
	color: white;
	font-size: 16px;
	transition: 0.4s;
	line-height: 40px;
	width: 0px;
}
@media screen and (max-width: 620px) {
	.searchBox:hover>.searchInput {
		width: 150px;
		padding: 0 6px;
	}
}

One comment

  1. […] This code is very easy to use. This code is a fully responsive design. I found this code on CodePen. The author of this code is Juan Pablo. My previous tutorial is how to create CSS Search Box With Animation Effects. […]

Leave a Reply