Create Animated Search Bar With Html Css

Create Animated Search Bar With Html Css

In this article, we learn about a search bar, how to create a search bar, and then we do an animation of our search bar that interacts with the user. We create a search bar using only Html and Css. Even we do not use any font awesome icon library or like this.

What we Create in this article – Animated Search Bar Output

This is a Dark mode search bar with a search🔍 Icon. We create with html and css and also animate with only css. So let’s start with html structure.

Html Code Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <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>Animated Search Bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <input type="text" placeholder="Search..">
    <div class="search"></div>
</body>
</html>

This is all Html Code so Let’s explain Step by Step.

1. Basic Html structure

<!DOCTYPE html>
<html lang="en">
<head>
  <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>Animated Search Bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- All tag Goes Here -->
</body>
</html>

In this code, there is no code related to this project🥶 . Yes, in this Html boilerplate, in this code some code must require for running our html code. Other code we use for responsive websites and language tags. Also, we use css so we already link in this code. You can see we use a link tag to link css files so now we write html code for the search bar.

Best Web Developer Portfolio | must Visit Once

2. Html code for div and Search bar Input

 <div class="container">
    <input type="text" placeholder="Search..">
    <div class="search"></div>

This is our main part, after this code, we did our half work of coding. We create a search input using html Element. You can see an input tag, it’s very important to tag when we create this search bar. Also, you can see the output after we add this code to our html file.

Html Output

Css Code

Basic Css Code Part 1

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #222222;
}

.container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
}

The output of this code

This is basic code for styling our search bar. You can see that the background color is black and the input styling has slightly changed. We use a tag import, we import a font from google and use it in our css code. Then we do universal styling with * this tag selector.

Css Code Part 2

.container .search {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  transition: all 1s;
  z-index: 4;
  /* box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); */
}

.container .search:hover {
  cursor: pointer;
}

.container .search::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 10px;
  right: 8px;
  bottom: -5px;
  left: 22px;
  width: 12px;
  height: 2px;
  background: #111;
  transform: rotate(45deg);
  /* transition: all .5s ease; */
}

.container .search::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -5px;
  right: 0;
  bottom: 0;
  left: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #111;
  /* transition: all .5s; */
  /* transition: all .5s ease-in-out; */
}

The output of this code

Many people think about how we achieve search bar icons because we do not use any font awesome icon library or Any other icon code to show icons. We create this search bar with only css code. We use the before and after tag to style the search bar. You can see we use the hover effect and many useful things like height width and then achieve this search bar icon.

Vs Code Extension For Frontend Web Developer

Css Code Part 3

.container input {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  outline: none;
  border: none;
  background: #fff;
  color: #111;
  /* text-shadow: 0 0 10px crimson; */
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 12px 13px 25px 0 #111, 8px 9px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
}

.container input:hover {
  cursor: pointer;
}

.container input:focus {
  width: 300px;
  opacity: 1;
  cursor: text;
}

.container input:focus~.search {
  right: -240px;
  background: transparent;
  z-index: 6;
}

.container input:focus~.search::before {
  top: 28px;
  left: 15px;
  width: 25px;
  height: 2px;
  bottom: 25px;
}

.container input:focus~.search::after {
  top: 29px;
  left: -8px;
  /* width: -25px; */
  width: 25px;
  right: -15px;
  height: 2px;
  border: none;
  bottom: 25px;
  /* margin: -25px 0px 0px 20px; */
  background: #111;
  border-radius: 0%;
  transform: rotate(-45deg);
}

.container input::placeholder {
  color: #111;
  opacity: 0.5;
  font-weight: bolder;
}

The output of this code

In this code, we style the search bar with animation. Hide input search and show only the search bar icon so when the user clicks on that icon it shows a search input type. And if he clicks on other parts of the screen search bar close automatically.

Creating A Custom Scroll Bar For Website

1st we use box-shadow, z index, and this all for input tag. Then we use the input hover effect and after this, we use focus attributes of css to target our icon bar. We use after and before with a focus tag so it gives a very impressive 🤩 effect when it’s open and close. And after all this code we use the Placeholder tag of css to style input text. That’s it for css code.

Hope you like this post, and if we make any mistakes please tell us in the comment💬 section or you can e-mail us directly so we improve and provide you best quality. Everyone is a beginner in their life so we are new in this writing field. Thank you❤ for visiting our blog.

Read our other blogs’ articles and give support by visiting another article. We share daily content about development and Project codes.

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment