• HTML
• CSS

HTML

<div class="box">
    <input type="text"  name="search" placeholder="Buscar cualquier cosa" class="src" autocomplete="off">
</div>

CSS

body{
    margin:0;
    padding:0;
    background-color:#fff;
    font-family:sans-serif;
}

.box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

input.src{
    padding:9px 10px 9px 32px;
    outline:none;
    font-size:18px;
    border-radius:15px;
    color:#444;
    border:3px solid #a50559;
    background:#fff url("search-icon.png")
        no-repeat 9px center;
    width:60px;
    transition:all .5s;
}

input.src:hover{
    width:180px;
    background-color:#fff;
    border-color:#8c10b3;
    box-shadow:0 0 5px #6dc;    
}


/*
    Fuente: https://www.youtube.com/watch?v=5XqglTObiRk
*/