Awesome Animated Search Bar using html and css

Awesome Animated Search Bar using html and css 

The search option is an essential part of any website. Because of this, the user-friendliness of any website increases. It performs as a gateway to the articles available on your website and helps readers find out what they are looking for quickly. If a visitor comes to a website and gets the information, he is searching for fast. Then the website will leave a good impression on him.

Extending the search box to Hover is an idea that modern websites use nowadays. A neatly designed search input element increases user engagement and interaction. Most of the cases are placed in the top navbar of any website to see it correctly. This blog will show you how to create a cool animated search box using only HTML and CSS.

Before starting the HTML markup, we have to link the font-awesome font CDN to our project. We have to use a search icon in our project of search box animation. You can directly use font awesome by using CDN or download it and link to your project.

HTML markup for this snippet is very simple and straightforward. We will take a container div with a "wrapper" class, which will hold and center our search box. Inside the wrapper, we will take another div named "search-area" following another named "single-search" class. We will then place the CSS input type selector with a class name of custom-input. You can use your version of the placeholder text here, which the viewer can see after the search box animation. Right after the input element, we will a href attribute with a class name of icon-area. Inside a. we will place a font-awesome search icon by which visitors will identify it as a search box.

In the CSS part, at first, we will give the body yellowish background color. Then we will provide the body and HTML a 100% width and height. We will also offer the wrapper class a 100% height, which occupies the whole viewport height. Next, to bring the search box elements middle, we used CSS display flex property for the search-area class and gave it a 100% height. We then gave the single-search class an auto margin for top and bottom to make the search box vertically and horizontally center. We need to provide it with a particular height of 4opx as well. After that, we provided the search box, one specific border-radius, background-color, padding, and box-shadow value. Now comes with the input element styling. At first, the border, outline, width be 0. then we will provide a line-height of 40px. We will set a linear .4s transition for the input width.

You may also like these articles as well:

• Awesome Water Ripples Effect using Jquery
• Awesome Bootstrap slider with Text Animation
• Navigation Bar with Slider using HTML CSS & Bootstrap 4

We then need to design the icon-area box. First of all, we will give it a particular height and width of 40px the float to the right of the search bar. Using CSS flex properties, we will bring it to the center. To make it round, we will give it a border-radius of 50%.

Now comes the animation part. To expand the single-search wrapper on hover, we will give the custom-input class width of 500px. We will set a transition effect here as well so that animation occurs smoothly. We will provide a caret-color of #262626 and also offer it with padding. In case you don't know, the caret-color property specifies the cursor color in inputs, text-area, or editable elements. Our final job is to provide a background color and color to icon-area when we hover over the single-search box.

Awesome Animated Search Bar using HTML and CSS (source code)

You need two separate files for this snippet. First, we need to make an HTML file for HTML mark up, and then we need to make a CSS file to style the elements that we have written in the HTML file. The Source code for this project is given below. You have to paste the codes in the respective files.

HTML:

<div class="wrapper"> <div class="search-area"> <div class="single-search"> <input class="custom-input" type="text" name="" placeholder="What are you looking for ..."> <a href="#" class="icon-area"><i class="fa fa-search"></i></a> </div> </div> </div>


CSS:

body,html{ height: 100%; width: 100%; margin: 0; padding: 0; background: #f3b927; } .wrapper{ height: 100%; } .search-area{ display: flex; justify-content: center; height: 100%; } .single-search { margin-bottom: auto; margin-top: auto; height: 40px; background-color: #fafafa; border-radius: 30px; padding: 10px; box-shadow: 0 8px 10px rgba(0,0,0,0.3); } .custom-input{ border: 0; outline: 0; width: 0; line-height: 40px; transition: width 0.4s linear; } input::placeholder { color: #262626; font-size: 20px; } .icon-area { justify-content: center; align-items: center; border-radius: 50%; height: 40px; width: 40px; float: right; display: flex; text-decoration: none; color: #262626; } .single-search:hover > .custom-input{ padding: 0 10px; width: 500px; caret-color:#262626; transition: width 0.4s linear; } .single-search:hover > .icon-area{ background: white; color: #262626; }

That's it for this tutorial. I hope you have successfully implemented the code in your project. If you any questions regarding this snippet, you can comment in the comment section, and I will try to answer as soon as I can.