<div class="search-wrapper">
  <input type="text" class="search-input" placeholder="Search website..." aria-label="Search">
  <button class="search-btn" aria-label="Submit Search">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </button>
</div>

.search-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 60px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  padding: 5px;
  width: 50px;
  height: 50px;
  transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s ease;
  overflow: hidden;
}
.search-wrapper:hover,
.search-wrapper:focus-within {
  width: 320px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.search-input {
  border: none;
  background: transparent;
  outline: none;
  color: #1f2937;
  font-size: 1rem;
  padding: 0 0 0 20px;
  width: 0;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.4s ease;
  height: 100%;
}
.search-wrapper:hover .search-input,
.search-wrapper:focus-within .search-input {
  width: calc(100% - 50px);
  opacity: 1;
}
.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 10px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.search-btn:hover {
  background: #1d4ed8;
  transform: rotate(90deg);
}