Morphing Glow Search Input

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="input-box-474"><input type="text" placeholder="Search resources..."><button class="btn-icon"><svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.input-box-474 { position: relative; display: flex; align-items: center; background: #18181b; border: 2px solid #27272a; border-radius: 99px; padding: 4px 6px 4px 18px; width: 220px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-family: system-ui, sans-serif; }
.input-box-474:focus-within { width: 300px; border-color: #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
.input-box-474 input { background: transparent; border: none; outline: none; color: #f4f4f5; font-size: 14px; width: 100%; }
.input-box-474 input::placeholder { color: #71717a; }
.input-box-474 .btn-icon { background: #10b981; border: none; color: #064e3b; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease, background 0.3s; flex-shrink: 0; }
.input-box-474:focus-within .btn-icon { transform: rotate(90deg); background: #34d399; }