<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<form action="">
  <input type="search" autofocus required>
  <i class="fa fa-search"></i>
  <button onclick="clearInput()">Clear</a>
</form>

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, black, #0f0f2b);
}

form {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 4px;
  border: 4px solid white;
  padding: 5px;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 42.5px;
  line-height: 30px;
  outline: 0;
  border: 0;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.fa {
  box-sizing: border-box;
  padding: 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 4px;
  color: #07051a;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}
form:focus-within,
form:hover,
form:valid{
  width: 200px;
  cursor: pointer;
}

form:hover input,
form:focus-within input,
form:valid input {
  width: 100%;
} 

form:hover .fa,
form:focus-within .fa,
form:valid .fa {
  background: #07051a;
  color: white;
}

button {
  display: none;
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  color: white;
  padding: 4px;
  min-height: max-content;
  background: transparent;
  outline: 0;
  border: 1px solid #303030;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

form:valid button {
  display: block;
}

const clearInput = () => {
  const input = document.getElementsByTagName("input")[0];
  input.value = "";
}