The search option is an essential part of any website. Because of this, the user-friendliness of any website increases. It acts 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. We hope you will like this CSS Animation Example.
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 CSS Animation or search box animation. You can directly use Font Awesome by using CDN or download it and link it to your project. The following video tutorial will show you a step-by-step method to make this search bar CSS Animation snippet.
Video Tutorial:
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 a 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 have 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, we will first give the body a 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 the 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 the top and bottom to make the search box vertically and horizontally centered. 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, and 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:
HTML:
CSS:
In the CSS part, we will first give the body a 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 the 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 the top and bottom to make the search box vertically and horizontally centered. 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, and 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:
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 CSS 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 the icon area when we hover over the single-search box.
Awesome Animated Search Bar using HTML and CSS (source code)
Now comes the CSS 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 the 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 markup, 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. You can also download the source code from the download button below.
HTML:
CSS:
Post a Comment
Please do not enter any spam link in the comment box.