How to Create Animated Search Bar With HTML And CSS Only

How to Create Animated Search Bar With HTML And CSS Only

HTML

<div class="search-container">
        <input type="text" name="search" placeholder="Search..." class="search-input">
        <a href="#" class="search-btn">
                <i class="fas fa-search"></i>      
        </a>
    </div>

CSS

body{
    margin: 0;
    padding: 0;
    background: #4834d4;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-container{
    background: #fff;
    height: 30px;
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.8s;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0 , 0.4);
}

.search-container:hover > .search-input{
    width: 400px;
}

.search-container .search-input{
    background: transparent;
    border: none;
    outline:none;
    width: 0px;
    font-weight: 500;
    font-size: 16px;
    transition: 0.8s;

}

.search-container .search-btn .fas{
    color: #4834d4;
}