Search Button Elastic Animation Using CSS

Categories: CSS / HTML

HTML Code

How to create animated search bar using HTML & CSS

Here, We will learn to create animated search button just using simple HTML, CSS and javaScript

Create a container div and inside that use a simple form with input field and a button.

Do not forget to add id’s and classes to form, input field and button.

Below is HTML file Code.

<div class="container">
		<form id="searchBox">
			<input type="text" name="input" id="searchInput">
			<button type="reset" class="search" id="searchBtn"></button>	
		</form>
	</div>

CSS Code

Below is CSS file Code. 

.container {
	position: relative;
	height: 100%;
	width: 100%;
}
input {
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: none;
	outline: 0;
	font-size: 16px;
	color: #fff;
	transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
				padding 0.2s;
	transition-delay: 0.4s;
	transform: translate(-100%, -50%);
}
#searchBox {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.search {
	background: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
	width: 50px;
	border:4px solid #fff;
	border-radius: 100%;
	border:0;
	outline: 0;
	color: inherit;
	cursor: pointer;
	transition: 0.2s ease-in-out;
	transform: translate(-100%, -50%);
}
.search:before {
	content: "";
	position: absolute;
	width: 20px;
	height: 4px;
	background-color: #fff;
	transform: rotate(45deg);
	margin-top: 26px;
	margin-left: 17px;
	transition: 0.2s ease-in-out;
}
.close:before {
	content: "";
	position: absolute;
	width: 27px;
	height: 4px;
	margin-top: -1px;
	margin-left: -13px;
	background-color: #fff;
	transform: rotate(45deg);
	transition: 0.2s ease-in-out;
}
.close:after {
	content: "";
	position: absolute;
	width: 27px;
	height: 4px;
	margin-top: -1px;
	margin-left: -13px;
	background-color: #fff;
	transform: rotate(-45deg);	
}
.square {
	box-sizing: border-box;
	width: 300px;
	height: 50px;
	border:4px solid #fff;
	border-radius: 0;
	padding: 0 40px 0 10px;
	background: none;
	outline: none;
	transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
				padding 0.2s;
	transition-delay: 0.4s, 0s, 0.4s;
	transform: translate(-100%, -50%);
}
.close {
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
input {
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: none;
	outline: 0;
	font-size: 16px;
	color: #fff;
	transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
				padding 0.2s;
	transition-delay: 0.4s;
	transform: translate(-100%, -50%);
}
#searchBox {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.search {
	background: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
	width: 50px;
	border:4px solid #fff;
	border-radius: 100%;
	border:0;
	outline: 0;
	color: inherit;
	cursor: pointer;
	transition: 0.2s ease-in-out;
	transform: translate(-100%, -50%);
}
.search:before {
	content: "";
	position: absolute;
	width: 20px;
	height: 4px;
	background-color: #fff;
	transform: rotate(45deg);
	margin-top: 26px;
	margin-left: 17px;
	transition: 0.2s ease-in-out;
}
.close:before {
	content: "";
	position: absolute;
	width: 27px;
	height: 4px;
	margin-top: -1px;
	margin-left: -13px;
	background-color: #fff;
	transform: rotate(45deg);
	transition: 0.2s ease-in-out;
}
.close:after {
	content: "";
	position: absolute;
	width: 27px;
	height: 4px;
	margin-top: -1px;
	margin-left: -13px;
	background-color: #fff;
	transform: rotate(-45deg);	
}
.square {
	box-sizing: border-box;
	width: 300px;
	height: 50px;
	border:4px solid #fff;
	border-radius: 0;
	padding: 0 40px 0 10px;
	background: none;
	outline: none;
	transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
				padding 0.2s;
	transition-delay: 0.4s, 0s, 0.4s;
	transform: translate(-100%, -50%);
}
.close {
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}

JS Code

Below is JS file Code. 

  const input = document.getElementById("searchInput");
	const searchBtn = document.getElementById("searchBtn");

	const expand = () => {
		searchBtn.classList.toggle("close");
		input.classList.toggle("square");
	};

	searchBtn.addEventListener("click", expand);

Watch Below Video for Detail Understanding

Search Your Keywords
Recent Post
Post Categories