<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Поле поиска</title>
<style>
body {
margin: 0;
padding: 0;
background: #00a08d;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #666666;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
color: black;
}
.search-btn {
color: #eeeeee;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;