Icon to Search Field Animation in CSS

Image: Icon to Search Field Animation in CSS GIF

With this snippet when you click on the search icon on the top right it expands into a text field that you can use to search. It was designed by Karl Kasischke.

If you are having trouble with the pen, try the archived copy on GitHub

Icon to Search Snippet

See the Pen HubSpot Expanding Search Form by Karl Kasischke (@kkasischke) on CodePen.0

scroll to top