Close

Animated search button

This is an example for a search box with expandable animations designed with HTML, JavaScript and CSS. In order to make the code more organized and readable, the variables has been set in CSS for each color value so the variable will be reusable within the CSS class as same color has been used in several places. The background color of the page has been set to the value of #2A2E37 in the background class. The initial width of the search box has been set it to 3px to make it hidden. On the open class, the width will be overridden with the value of 420px so that the search box will be visible to the user on a click event. JavaScript function has been used to toggle the class by the name ‘open’ to apply the style on the selected element. credits - https://codepen.io/kristyjy/pen/zGOXYb

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.