Animated search bar in css
Animated search bar in css

Hy Friends! In this article, we will create a Cool Animated Search Bar in CSS. Search Bar is useful for easy access to any content. The Search Bar will be created using only HTML & CSS.

There are many types of search bars. We can create a search bar with popup, fixed, slide, and in some cases, the animation is also added on hover effects. But In this tutorial, we will create a search bar that will also have animation. Our search icon will be displayed on the webpage, but when the user hovers on it, it will be expended to a search bar input with a search icon.

Table of Contents

Let’s Start Creating our search bar!

Animated Search Bar in CSS

As I said, we will create it only using HTML and CSS. So we need to create two files called index.html and style.css. Let’s start with our index.html code.

index.html

<!DOCTYPE html>
<head>
  <title>Search bar in css</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

  <div class="searchBox">
    <input class="searchInput"type="text" name="" placeholder="Search">
    <button class="searchButton" href="#">
      <i class="material-icons">
        search
      </i>
    </button>
  </div>

</body>
</html>

In this file, we have linked a material icon CDN, because we will use a material search icon.
After that, we have created our basic structure for our search bar as a parent dive “searchBox”, which will contain all the search bar codes. Input tag is used to take input from the user, a button is also added, in button we are using a material UI icon. As a default text “search” will be shown on the button, If our connection is not ok, or we had missed our material UI CDN.

Our HTML code is done! Now create the code for style.css.

style.css

We will create style.css code in parts with an explanation so copy all the code or our GitHub Link is Given below, you can copy the code from GitHub!

:root{
  --bgColor: #FFFFFF;
  --primaryColor: #2A3640;
  --secondaryColor: #FFFFFF;
  --txtColor: #2F3640;
}


in the root, we had defined some variables for easy changing our data,
–bgColor: #FFFFFF; is used to set the background color as white.
–primaryColor: #2A3640; is used to set the gray color in the input element and button.
–secondaryColor: #FFFFFF; is used to set the color for material search icon and after hover as a search button background.
–txtColor: #2F3640; is used to set the material search icon color after hover.

body {
    background: var(--bgColor);
}


Set the background color from the variable.

.searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
}


For center alignment, position is set to absolute,

top: 50%;
left: 50%;
transform: translate(-50%,50%);

These three properties will align the search bar to the center.

.searchBox:hover{
  box-shadow: 0px 0px 6px var(--primaryColor);
}


Shadow is also added when the user hovers on the search bar.

.searchBox:hover > .searchInput {
    width: 240px;
    padding: 0 6px;
}

.searchBox:hover > .searchButton {
  background: var(--secondaryColor);
  color : var(--txtColor);
}

To display the input bar after hovering on the button we set the width to 240px. And also change the color of search button after hover so we added background and color properties.

.searchButton {
    color: var(--secondaryColor);
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primaryColor);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}


secondaryColor is added for the search button text and icon. content is aligned center, transition time is set to 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;
}


font size is set for the input box and transition is also set to 0.4s. Line height is set to 40px so it can show the space.

@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
    width: 150px;
    padding: 0 6px;
}
}


@media screen query is added because when we downsize the screen width the content was not able to be filled, it goes miss positioned. So this query will set the content when the user tries to downsize the screen width.

If you are having any issues with this code, then visit our GitHub repository for Code! Click Here!

You Might like this:

Hope you guys enjoyed this article!

Thank You for Reading!
Have a great day!

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply