Pure CSS Expanding Search Box

Preview:

Description:

An easy expanding (click-to-expand) search box written in pure CSS.

How to use it:

1. Add a search field together with a search button to the search box.

<div class="search-box">
  <input type="text" class="search-input" placeholder="Start Looking For Something!">
  <a class="search-btn" href="#">
    <!-- Seach Icon -->
    <i class="fas fa-search"></i>
  </a>
</div>

2. Enable the search button to toggle the search box.

/* div */
.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #cd595a;
  height: 40px;
  border-radius: 50px;
  padding: 10px;
}
/* input */
.search-input {
  outline: none;
  border: none;
  background: none;
  width: 0;
  padding: 0;
  color: #fff;
  float: left;
  font-size: 16px;
  transition: .3s;
  line-height: 40px;
}
.search-input::placeholder {
  color: #dbc5b0;
}
/* icon */
.search-btn {
  color: #fff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #cd595a;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: .3s;
}
.search-input:focus,
.search-input:not(:placeholder-shown) {
  width: 240px;
  padding: 0 6px;
}
.search-box:hover > .search-input {
  width: 240px;
  padding: 0 6px;
}
.search-box:hover > .search-btn,
.search-input:focus + .search-btn,
.search-input:not(:placeholder-shown) + .search-btn {
  background: #fff;
  color: #cd595a;
}