<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);
}