<html>
  <head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <title>Arama Kutusu</title>
  </head>
  <body>
    <div class="arama-kutusu">
      <input class="arama-yazi" type="text" name"" placeholder="Arayacağınız Kelime">
      <a class="arama-buton" href="#">
      <i class="fas fa-search"></i>
        </a>
    </div>
body {
  margin: 0;
  padding: 0;
  background: #e74c3c;
}
.arama-kutusu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #95a5a6;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}
.arama-kutusu:hover > .arama-yazi{
  width: 240px;
  padding: 0 6px;
  
}
.arama-kutusu:hover > .arama-buton{
  background: white;
  
}
.arama-buton {
  color: #e74c3c;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #95a5a6;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
.arama-yazi {
  border:none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.