<div class="search-container">
  <input class="search-input" type="text" placeholder="请输入关键词">
  <span class="search-btn"></span>
</div>
.search-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 500px;
  height: 70px;
  gap: 5px;
}
.search-input{
  border: none;
  background: transparent;
  font-size: 18px;
  border: 0;
  padding: 0;
  border-radius: 35px;
  width: 0;
  transition: all .5s;
}
.search-btn{
  font-size: 28px;
  color: white;
  display: inline-block;
  background-color: green;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 35px;
  text-align: center;
  transition: background-color .8s;
}
.search-btn:hover{
  cursor: pointer;
  background-color: red;
}
.search-container:hover .search-input{
  border: 2px solid #eee;
  padding: 15px;
  border-radius: 35px;
  width: 80%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.