<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <title>Search-Box</title>
    </head>
    <body>
        <div class="Hotbg">
            <input type="text" name="" class="Hotbg-txt" placeholder="Search >>>">
            <a href="#" class="Hotbg-btn">
                <i class="fa fa-search"></i>
            </a>
        </div>
    </body>
</html>
body
{
    margin: 0;
    padding: 0;
    background: cadetblue;
}

.Hotbg
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
}

.Hotbg:hover > .Hotbg-txt
{
    width: 240px;
    padding: 0 6px;
}

.Hotbg:hover > .Hotbg-btn
{
    background: azure;
    color: black;
}

.Hotbg-btn
{
    color: #e84118;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
    color: azure;
    cursor: pointer;
}

.Hotbg-btn > i
{
    font-size-adjust: 30px;
}

a
{
    text-decoration: none;
}

.Hotbg-txt
{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: azure;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
    font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.