Expanding Search

<div class="nuda-expsearch">
  <button class="nuda-expsearch__btn" aria-label="Open search">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="7" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  </button>
  <input type="search" placeholder="Search components…" />
</div>

.nuda-expsearch {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
  width: 42px;
  transition: width .5s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s;
}

.nuda-expsearch:hover,.nuda-expsearch.is-open,.nuda-expsearch:focus-within {
  width: 240px;
  background: rgba(255,255,255,.06);
  border-color: #e4ff54;
}

.nuda-expsearch__btn {
  background: transparent;
  border: 0;
  color: #a0a0a8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: color .25s;
}

.nuda-expsearch__btn svg {
  width: 16px;
  height: 16px;
}

.nuda-expsearch:hover .nuda-expsearch__btn,.nuda-expsearch.is-open .nuda-expsearch__btn,.nuda-expsearch:focus-within .nuda-expsearch__btn {
  color: #e4ff54;
}

.nuda-expsearch input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #fafafa;
  font-size: 13px;
  padding: 8px 16px 8px 0;
  opacity: 0;
  transition: opacity .35s ease .15s;
}

.nuda-expsearch input::placeholder {
  color: #63636e;
}

.nuda-expsearch:hover input,.nuda-expsearch.is-open input,.nuda-expsearch:focus-within input {
  opacity: 1;
}