How to Built an Interactive Search Bar Icon
Search Bar is a graphical element that we come across in most user interphases in the daily basis.Nonetheless just a few are aye catchy or provide a smooth experience. Olev Frolov came up with this beautiful interactive design which I decided to recreate with a few changes.
To start building this design we’ll start off with the html.
I have wrapped all the content in a main class div element followed by a search container which includes the input element and the search icon. These two have been wrapped in a div with their respective classes to have better control when we trigger an action.
*good thing to notice is that i have set a change class to all the divs that we will later add the active class on click.
Now let’s move on to the CSS. First let’s take a look at the general styling of the design.
Let’s break it down:
Main class uses flex to center the content and I have set the width and height to 100 respectively.
The search container justifies the context to flex-start so this one is displayed on the left hand side of the div.It has a border border radius set to 50px for round corners and also a box shadow with a blurriness of 20px. lastly, I set a transition for width for when the active class is added.
cursor is not displayed to be able to hide it when the search container is not extended.
input: I have position this absolute to be able to overlap it with the search icon and also got rid of the default properties to only display the blinking cursor when the input is displayed.
icon class has a position relative with a transition for transform of 1 second.and circle and stick are self explanatory .
Now let’s take a look at the active class
Last, let’s activate those transitions by a clicking event.
First,I selected two elements by id- search container and input so we can add an event on the search and maintain the input focused. This way we can see the blinking cursor as soon as the search icon disappears.
Secondly, I selected all the div elements with the class change to be able to iterate through them and add the active class on click.
Hope you enjoyed following along or simply learn a bit as I did recreating this beautiful interactive search icon. Here is the final outcome
