As a web developer, you know that a search bar is essential to any website.

It allows users to find the content they’re looking for and can be a powerful tool. But a plain, static search bar can be dull and uninviting. That’s where animated search bars come in.

Also Read - Animated text using CSS

By adding animations to your search bar, you can create a more engaging and appealing user experience.

This post will show you how to create beautiful, animated search bars using HTML and CSS. We’ll provide you with step-by-step instructions and plenty of code to help you get started. Whether a beginner or an experienced developer, this post has something for you. Get ready to take your search bar to the next level with beautiful animations!

HTML

First, we will start by writing the HTML code for our search bar

<div class="container">
  <input type="text" placeholder="Search..." />
  <div class="search"></div>
</div>

In the above code, we have created a container for our search bar and used a div element for the search and close icon.

The input element with the type text is our search bar.

CSS

Now let’s make it more beautiful with the help of CSS

@import url("https://fonts.googleapis.com/css?family=Inconsolata:700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #252525;
}

.container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
}
.container .search {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: crimson;
  border-radius: 50%;
  transition: all 1s;
  z-index: 4;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
.container .search:hover {
  cursor: pointer;
}
.container .search::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 22px;
  right: 0;
  bottom: 0;
  left: 22px;
  width: 12px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
  transition: all 0.5s;
}
.container .search::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -5px;
  right: 0;
  bottom: 0;
  left: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid white;
  transition: all 0.5s;
}
.container input {
  font-family: "Inconsolata", monospace;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  outline: none;
  border: none;
  background: crimson;
  color: white;
  text-shadow: 0 0 10px crimson;
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
}
.container input:hover {
  cursor: pointer;
}
.container input:focus {
  width: 300px;
  opacity: 1;
  cursor: text;
}
.container input:focus ~ .search {
  right: -250px;
  background: #151515;
  z-index: 6;
}
.container input:focus ~ .search::before {
  top: 0;
  left: 0;
  width: 25px;
}
.container input:focus ~ .search::after {
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: white;
  border-radius: 0%;
  transform: rotate(-45deg);
}
.container input::placeholder {
  color: white;
  opacity: 0.5;
  font-weight: bolder;
}

In the above CSS code, we are aligning the f pieces of the search bar and making it animate.

So, guys that is it for this post. Please share if you like this post.