Untitled

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>
body{
margin:0;
padding:0;
background: #0094ff;
}
a{
text-decoration: none;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #333;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt{
	width: 240px;
    padding: 0 6px;
}
.search-box:hover > .search-btn{
	background: white;
}
.search-btn{
color: #0094ff;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #333;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt{
	border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
}
</style>
</head>
<body>

<div class="search-box">
	<input class="search-txt" type="text" name="" placeholder="Pretraga">
    <a class="search-btn" href="#">
    	<i class="fas fa-search"></i>
    </a>
</div>

</body>
</html>