In this article, I am going to show you how to create an animated search bar using HTML and CSS code. The search bar is an important design that is used in every website. There are different types of search bars.
In some cases, the search bar is completely fixed, in some cases pop-ups, and in some cases animated. In the case of animated search bars, the icon is basically visible. When you click on that icon, the entire search bar is visible. The design I have shown in this tutorial is a complete animated search bar. Normally only icons are seen in this search bar. When you click on that icon, the full search box will appear and you will see the place to input.
In this case, I have basically used a small amount of JavaScript programming code. You can use the demo below to know how it works.
See the Pen
search bar 4 by Foolish Developer (@fghty)
on CodePen.
If you want the required source code, you can copy the source code from the demo option above. For beginners, I suggest you follow the tutorial below to make this design.
Step 1: Basic Html structure
First of all, you create an HTML and CSS file. Combine HTML files and CSS files. Copy the HTML structure below and paste it into your Html file. Basically, the following HTML structure is the basic structure.
The following CSS codes are used for a basic design. I have used blue color in the background. You can use any other color in this place if you want.
<!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”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background-color: #0b1020;
overflow: hidden;
}
Step 2: Create the background of the search bar
I used the following HTML and CSS code to create the background of the search icon.
<div class=”search-box”>
</div>
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #ffffff;
transition: all 0.2s ease-in-out;
}
.search-box:hover:not(.active) {
box-shadow: 0 0 0 5px #cccccc;
}
Step 3: Add search icons and input space
I have added a search icon and a place to input in the search bar with the help of the code below
To make this search icon work, you must add the font awesome CDN link to your HTML file. I have completely designed the icons and input space using the code below.
<i class=”fa fa-search”></i>
<input type=”text” class=”search-bar” placeholder=”Search Your Query…”>
.search-box .fa-search {
color: #275efe;
font-size: 20px;
padding: 20px;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
Step 4: Hide input space and design icons
As I said before, under normal circumstances only the search icon will be visible when you click on that search icon then the full search bar will be visible. JavaScript code has helped to activate this click function.
.search-box .search-bar {
font-family: “Poppins”, sans-serif;
font-size: 18px;
width: 0;
padding: 0;
background-color: transparent;
border: none;
color: #121212;
transition: all 200ms ease-in-out;
}
.search-box .search-bar::placeholder {
font-size: 16px;
}
.search-box .search-bar:focus {
outline: none;
}
.search-box.active {
width: 350px;
justify-content: space-between;
padding-right: 20px;
}
.search-box.active .search-bar {
width: 100%;
border-left: 1px solid #c5c5c5;
padding: 5px 10px;
}
.search-box.active .fa-search {
padding-right: 15px;
}
Step 5: Add JavaScript code to activate the search icon
Below is a small amount of JavaScript programming code I used to activate this search icon. If you know basic and basic JavaScript, you can understand a little bit of JavaScript below.
const searchBox = document.querySelector(“.search-box”);
document.querySelector(“.fa-search”).addEventListener(“click”, () => {
searchBox.classList.contains(“active”)
? searchBox.classList.remove(“active”)
: searchBox.classList.add(“active”);
});
Hopefully from this tutorial, you have learned how to create animated search bars using HTML and CSS programming code. There are many such search icons and search bars that make this design. You can follow those designs if you want.
