Animated Search Bar with html and css ( Source Code )

Animated Search Bar with html and css ( Source Code ) 

HTML

<div class="wrapper c-height"> <div class="search-area c-height"> <div class="single-search"> <input class="custom-input" type="text" name="" placeholder="What are you looking for ..."> <a href="#" class="icon-area"><i class="fa fa-search"></i></a> </div> </div> </div>


CSS


body,html{ height: 100%; width: 100%; margin: 0; padding: 0; background: #262626 !important; } .single-search { margin-bottom: auto; margin-top: auto; height: 40px; background-color: #fafafa; border-radius: 30px; padding: 10px; } .search-area{ display: flex; justify-content: center; } .c-height { height: 100%; } .custom-input{ border: 0; outline: 0; width: 0; line-height: 40px; transition: width 0.4s linear; } input::placeholder { color: #262626; font-size: 20px; } .single-search:hover > .custom-input{ padding: 0 10px; width: 500px; caret-color:#262626; transition: width 0.4s linear; } .single-search:hover > .icon-area{ background: white; color: #262626; } .icon-area { justify-content: center; align-items: center; border-radius: 50%; height: 40px; width: 40px; float: right; display: flex; text-decoration: none; color: #262626; }