<input id="search" placeholder="Search..." class="input" />
<button class="search-button"><i class="fas fa-search"></i></button>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

.u-no-focus-outline *:focus {
    outline: none;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    background: linear-gradient(90deg, #7d5fff, #7158e2);
}

.input {
    border: none;
    height: 50px;
    font-size: 1.2rem;
    width: 0;
    padding: 0;
    transition: all 0.3s ease;
}

.input.open {
    display: inherit;
    width: 200px;
    padding: 4px 10px;
}

.search-button {
    height: 50px;
    width: 50px;
    border: none;
    background-color: white;
    font-size: 1.5rem;
    cursor: pointer;
}
!(function () {
  document.body.classList.add("u-no-focus-outline");

  document.addEventListener("keyup", function (event) {
    if (event.key === "Tab") {
      document.body.classList.remove("u-no-focus-outline");
      document.body.classList.add("u-focus-outline");
    }
  });

  let searchButton = document.querySelector("button");
  let input = document.querySelector("input");

  searchButton.addEventListener("click", () => {
    input.classList.toggle("open");
    input.focus();
  });
})();

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.