<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="middle">
  <form action="" class="search-box">
    <input class="input" type="text" name="" value="">
    <button type="button" class="btn" name="button"></button>
  </form>
</div>

<script type="text/javascript">
  $(".btn").on("click", function() {
    $(".input").toggleClass("inclicked");
    $(".btn").toggleClass("close");
  });
</script>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #badc58;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.input {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid #fff;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  transition: width .4s ease-in-out,
              border-radius .8s ease-in-out,
              padding .2s;
  transition-delay: .4s;
  color: white;
  font-size: 20px;
}
.btn {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  box-sizing: border-box;
  background: transparent;
  outline: none;
  border: none;
  cursor: pointer;
}
.btn::before {
  content: "";
  width: 4px;
  height: 25px;
  background: #fff;
  position: absolute;
  transform: rotate(-45deg);
  bottom: -16px;
  right: -6px;
  transition: .3s ease;
}
.inclicked {
  width: 360px;
  border-radius: 0;
  padding: 0 15px;
  padding-right: 45px;
}
.close::before, .close::after {
  content: "";
  width: 4px;
  height: 34px;
  background: #fff;
  position: absolute;
  bottom: 12px;
  right: 28px;
}
.close::before {
  transform: rotate(45deg);
}
.close::after {
  transform: rotate(-45deg);
}