Animated Search-Bar by using Pure Html and CSS

Hello Folks! I'am here another amazing tutorial ???????? of Html and CSS . Today I'am going to show you how you can create animated "Search-Bar" by using Html & CSS. Code is simple and easy to understand????????. I hope you people love it! keep in touch for more stuff ????????

  <link rel="stylesheet" href="">
<div class="search-box">
        <input type="text" class="search-txt" name="" placeholder="Type to search">
        <a class="search-button" href="#">
        <i class="fa fa-search"></i>

    margin: 0;
    padding: 0;
    background: #49208bd0;

    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #eef1f0;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

width: 250px;
padding:4px 8px;

    color:#f7f1f0 ;
    float: right;
    width:40px ;
    height:40px ;
    border-radius:50% ;
    background:#2f3640 ;
    display: flex;
    justify-content: center;

    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0%;
    color: rgb(17, 16, 16);
    font-size: 25px;
    transition: 0.9s;
    line-height: 40px;
    width: 0px;
    position: absolute;
    top: 33%;