Hello Coders👩🏻💻!! In this article will teach you how to make an Animated Search Bar Using HTML and CSS. When it comes to websites, the search bar is crucial. The search bar is used to find any item or category.
How To Make Animated Search Bar Using HTML & CSS ?
Such designs are incredibly simple to create. There are many different kinds of search bars. Some search bars are pop-ups, while others are fixed, and some have animated or hover effects.
This article’s search bar tutorial will focus on the Animated Search Bar. Under normal circumstances, only the search icon is visible.
I hope you must have got an idea about the project.
So, Let’s Begin Star Rating Project By Adding The Source Codes. first We Are Using The HTML Code.
Step1: Adding HTML code
If you want to make it, first make an HTML file and then copy and paste the HTML structure in your IDE. Now we will look at our HTML code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Star Rating</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Animated Search Box</h1>
<div class="searchBox">
<input class="searchInput"type="text" name="" placeholder="Search">
<button class="searchButton" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</body>
</html>
- First, we used the <h1> tag to add the main heading of our webpage.
- We’ve now created a container with a div tag that contains our search bar.
- Using the input tag, we’ve added a searchbox of type “text.”
- Now to add the search icon we have used fontawesome icons .
(Note: To add the icon in your document you should the add the import link into your header as we have added in our header.)
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Now let’s take look at our output without adding styling.
So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.
Step2: CSS code for animated Search Bar
Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document written in a markup language like HTML or XML.
Now we will look at our CSS code.
body {
background-image: linear-gradient(to right , #FFAFBD , #ffc3a0);
}
h1{
font-size: 4rem;
text-align: center;
color: #fff;
}
.searchBox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.searchBox:hover > .searchInput {
width: 240px;
padding: 0 6px;
}
.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}
.searchButton {
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
@media screen and (max-width: 620px) {
H1{
font-size: 1rem;
text-align: center;
}
.searchBox:hover > .searchInput {
width: 200px;
padding: 0 6px;
}
}Now that we’ve included our CSS code in our article, let’s go over it step by step.
Step1: When we have a good background on our webpage, it looks presentable. We used the body tag for this, and we added the linear gradient background to our webpage using the “background-image” property. Now we will style our webpage’s main heading. We have defined the font-size as “4rem” and the text is aligned to the center of our webpage.
body {
background-image: linear-gradient(to right , #FFAFBD , #ffc3a0);
}
h1{
font-size: 4rem;
text-align: center;
color: #fff;
}
Step2:The (.searchbox) class will be used to style the container of our search box. We defined its position as absolute, with “40%” from the top and “50%” from the left side of the screen window. We also used the transform property to move the element accordingly. We’ve also set the border-radius to “40px.”
.searchBox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}Step3:In this section, we will add the hover property to our input box and button. The input box’s width is set to 240px, with padding on the left and right sides. On hover, the button background colour is set to white.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
.searchBox:hover > .searchInput {
width: 240px;
padding: 0 6px;
}
.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}
Step4: We will style the search input and search button in this section. The colour of the search button is set to “white” in this case. The position is set to float-right. “40px” and “40px” are the width and height, respectively. Flex is the display type. The content is justified as being in the centre with a transition delay of 0.4s. We will now style our search input. The border is defined as “none” in this case. The position is set to float “left,” and the width is set to “0 px.”
.searchButton {
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}Step5: Now we’ll make our website more responsive. If the screen width is less than the defined screen width, our webpage’s heading size changes to “1 rem,” the text is aligned at the “centre,” and the searchbox hover width changes to 200 px.
50+ Html ,Css & Javascript Projects With Source Code
@media screen and (max-width: 620px) {
H1{
font-size: 1rem;
text-align: center;
}
.searchBox:hover > .searchInput {
width: 200px;
padding: 0 6px;
}
}Now we have completed our css code and below👇here is the output after styling our webpage.
Output:
ADVERTISEMENT
ADVERTISEMENT
Now as we compeleted our project now will look at how it is working.
ADVERTISEMENT
Preview:
ADVERTISEMENT
Codepen Preview Of Animated Search Bar Using HTML and CSS
Now We have Successfully created our Animated Search Bar Using HTML and CSS. You can use this project for your personal webpage and We hope you understood the project , If you any doub’t feel free to comment!!
ADVERTISEMENT
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
