Animated Search Bar
This is an example for a search button designed with HTML and CSS. The complete page background class has been set with the value of #252525, the width and the height as 100%. In order to hide the text input field, the input type of text element is used with different values to occur on different states. When it is initially loaded, the width is set to 50px which means it will be on the bottom layer of the search button. On the event of focus, it will set the width to 300px which will make it visible to the user. The placeholder of the text field has been set with the use of the placeholder CSS class, setting the color as white, opacity as 0.5 and font weight as bolder. The shade of the text box has been implemented with the values of 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2) set to the box shadow class.