How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

If you want to create an Animated Search Bar using HTML and CSS then this tutorial will help you. Here I have shared a tutorial on creating a simple animated search icon.

Search Bar is an important element for different websites. Currently, the search bar is used on all websites. There are different types of search bars, some search bars are completely fixed, some are animated, some are pop-ups, etc.

The design I have shown in this tutorial is an animated search bar. In this case, only one icon can be found, not the entire search bar. The input box appears when you click on that icon. Most websites use this type of Animated Search Bar. Which enhances the quality of the website and saves space.

Animated Search Bar

Below I have given a demo that will help you to know how this Animated Search Bar works. Below you will find the required source code that you can copy directly and use in your work.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a small area has been created on a web page. He has a search icon. When you click on that icon or button, the icon will move to the right and a space will be created on the left. An input box will be created where you can input the keyword of your choice.

How To Make an Animated Search Bar 

In this case, I have used HTML, CSS, and a small amount of jQuery. All information and search icons have been added by HTML. CSS designed it. Only some jQuery has been used to make it work.

This Animated Search Bar is very easy to create. If you have a basic idea about HTML CSS then you can easily create this Animated Search Bar. Earlier I shared with you many more types of CSS search bar tutorials.

Step 1: Basic structure of Search Bar

Created an area of ​​this animated search bar using the following HTML and CSS codes. This is basically the basic structure of the search bar.

<div class=”wrapper”>
  <div class=”searchbox”>
  </div>
</div>

The webpage has been designed using the following CSS. Here I have used light blue as the background color of the webpage.

*{
margin: 0;
padding: 0;
}
body{
background: #e4eaf0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.searchbox{
position: relative;
}

Step 2: Place to input in the Search Bar (more…)

Continue ReadingHow To Make an Animated Search Bar using HTML CSS
Awesome Animated Search bar using HTML & CSS

Awesome Animated Search bar using HTML & CSS

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.

(more…)

Continue ReadingAwesome Animated Search bar using HTML & CSS