How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

If you want to create an Animated Search Bar using HTML and CSS then this tutorial will help you. Here I have shared a tutorial on creating a simple animated search icon.

Search Bar is an important element for different websites. Currently, the search bar is used on all websites. There are different types of search bars, some search bars are completely fixed, some are animated, some are pop-ups, etc.

The design I have shown in this tutorial is an animated search bar. In this case, only one icon can be found, not the entire search bar. The input box appears when you click on that icon. Most websites use this type of Animated Search Bar. Which enhances the quality of the website and saves space.

Animated Search Bar

Below I have given a demo that will help you to know how this Animated Search Bar works. Below you will find the required source code that you can copy directly and use in your work.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a small area has been created on a web page. He has a search icon. When you click on that icon or button, the icon will move to the right and a space will be created on the left. An input box will be created where you can input the keyword of your choice.

How To Make an Animated Search Bar 

In this case, I have used HTML, CSS, and a small amount of jQuery. All information and search icons have been added by HTML. CSS designed it. Only some jQuery has been used to make it work.

This Animated Search Bar is very easy to create. If you have a basic idea about HTML CSS then you can easily create this Animated Search Bar. Earlier I shared with you many more types of CSS search bar tutorials.

Step 1: Basic structure of Search Bar

Created an area of ​​this animated search bar using the following HTML and CSS codes. This is basically the basic structure of the search bar.

<div class=”wrapper”>
  <div class=”searchbox”>
  </div>
</div>

The webpage has been designed using the following CSS. Here I have used light blue as the background color of the webpage.

*{
margin: 0;
padding: 0;
}
body{
background: #e4eaf0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.searchbox{
position: relative;
}

Step 2: Place to input in the Search Bar

The input space has been created using the following HTML and CSS codes. Here I have used the input function of HTML to create space for input. Input space cannot be found here.

<input type=”text” class=”input” placeholder=”Search Here ….”>
.searchbox .input{
width: 0px;
border: 0px;
height: 75px;
padding: 0px 35px;
border-radius: 50px;
box-shadow: 0 0 15px 1px #b6bbc0;
outline: none;
color: #42be11;
font-size: 20px;
transition: all 0.5s linear;
}
Place to input in the Search Bar

Step 3: Add a search icon

The search icon has been added using the following HTML and CSS codes. I have used the font-awesome icon here.

The width of the background of this icon: 75px, height: 75px; And font-size: 22px has been used to increase the size of the icon.

<div class=”searchbtn”>
  <i class=”fas fa-search”></i>
</div>
.searchbtn{
position: absolute;
top: 0;
right: -1px;
background: #fff;
width: 75px;
height: 75px;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s 0.6s linear;
}
.searchbtn .fas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #1155be;
font-size: 22px;
transition: all 0.5s 0.6s linear;
}
Add a search icon

Step 4: What happens after clicking on the search icon is determined

What kind of change will occur after clicking on that icon is determined by the following CSS. If these codes do not work without javascript. 

When you click on the search button, the button will move to the right and an input point will appear on the left side of the button. At that time the width of the Animated Search Bar will be 355px.

.searchbtn.bg-green{
background: #1155be;
transition: all 0.2s linear;
}
.searchbtn .fas.color-white{
color: #fff;
transition: all 0.2s linear;
}
.searchbox .input.active-width{
width: 355px;
}
What happens after clicking on the search icon is determined

Step 5: Activate the Animated Search Bar using Jquery

Now is the time to implement this Animated Search icon using a small amount of JQuery.

$(“.searchbtn”).click(function(){
  $(this).toggleClass(“bg-green”);
  $(“.fas”).toggleClass(“color-white”);
  $(“.input”).focus().toggleClass(“active-width”).val(”);
});
Activate the Animated Search Bar using Jquery

Hopefully, you have been able to create this animated search bar using the above HTML and CSS. If there is any problem then you can definitely let me know by commenting. 

Earlier I shared with you a tutorial on creating such animated search icons using HTML CSS and JavaScript.