Animated Search Bar Using Only HTML and CSS

Animated Search Bar Using Only HTML and CSS

Animated Search Bar Using Only HTML and CSS

In this article, you will learn how to create an animated search bar using only HTML and CSS programming code. The search bar plays a significant role in the case of websites. In any case, the search bar is used to search for any item or category. 

Such designs are very easy to make. There are many types of search bars. Some search bars are pop-ups, some are fixed, and in some cases animated or hover effects are added. 

The search bar tutorial that I will show in this article is the animated search bar. In this case, only the search icon can be seen under normal conditions. 

Animated Search Bar HTML CSS

When the mouse is moved or clicked on it, the complete search bar will be seen, i.e. the search bar will be enlarged in size. This design is made using only HTML and CSS code. 

If you want to watch the live demo, you can watch the live demo using the demo button below the article and download the required source code.

See the Pen
Animated Search bar by Foolish Developer (@fghty)
on CodePen.

How to create an animated search bar

If you want to know step by step and completely know which programming code to use to create an element, you can follow the tutorial below. Here I show you how I made it with complete step-by-step pictures.

Step 1: Create the basic structure of the search bar

If you want to create it, first you need to create an HTML file and copy and paste the HTML structure below into that file. Complete information on where to add any code is given in that structure.

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>
      <style> Add CSS Code</style>
</head>
<body>
       Html Code
</body>
</html>

Step 2: Create the structure of the search bar

The following programming codes have been used to construct this search bar. An icon has been taken here and a place to input has been created. In the meantime, I have used placeholders using the following codes.

<form action=””>
  <input type=”search” placeholder=”Search here …”>
  <i class=”fa fa-search”></i>
</form>

Step 3: Add css code and design icon and search bar

I designed that icon of CSS code below. Normally only icons can be seen in this search bar.

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    background: #07051a;
}
form{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}
input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
}
.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

Step 4: Add hover effect to this search icon

I have done the most important work of the search icon using the following codes. This means that when you move the mouse over the search icon, the search icon increases in size. I used my own programming code to do this.

 In this case, when you mouse over or click on the search icon, the search icon will increase by 320px. However, you can increase or decrease the amount of this px if you want.

form:hover{
    width: 200px;
    cursor: pointer;
}
form:hover input{
    display: block;
}
form:hover .fa{
    background: #07051a;
    color: white;
}

Hopefully from this article, you have learned how to make a search bar. If you have any problems, you can definitely comment.