Neumorphic Arama Çubuğu

<div class="search-box">
  <input class="search-txt" type="text" placeholder="Arama yap...">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

.search-box { position: relative; background: #2a2a35; height: 50px; border-radius: 40px; padding: 10px; box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5), inset -5px -5px 10px rgba(255,255,255,0.05); display: flex; align-items: center; }
.search-btn { color: #00cec9; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: 0.4s; text-decoration: none; box-shadow: 4px 4px 8px rgba(0,0,0,0.4), -4px -4px 8px rgba(255,255,255,0.05); }
.search-txt { border: none; background: none; outline: none; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; font-family: 'Inter', sans-serif; }
.search-box:hover > .search-txt { width: 200px; padding: 0 15px; }
.search-box:hover > .search-btn { background: #00cec9; color: #2a2a35; }