.search{
  display: inline-block;
  position: relative;
}

.search input{
  height: 40px;
  padding: 0 40px 0 0px;
  border-radius: 20px;
  border: 0;
  width: 0;
  transition: 500ms;
}
.search button{
  border-radius: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border: 0;
  cursor: pointer;
}
.search:hover>input{
  width: 250px;
  padding-left: 20px;
  outline: none;
}