<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="orbit-search">
  <span class="orbit-icon">
    ⌕
    <i>
    </i>
  </span>
  <input type="search" placeholder="Search the universe">
  <kbd>
    ⌘ K
  </kbd>
</label>

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

.orbit-search{display:flex;align-items:center;gap:10px;width:270px;padding:7px 10px;border:2px solid #b7c5d8;border-radius:999px;background:#f7faff;color:#3b4c68;font-family:Arial;transition:border-color .25s,box-shadow .25s}.orbit-search input{width:100%;border:0;outline:0;background:transparent;color:#31435e;font-size:14px}.orbit-search input::placeholder{color:#92a2b8}.orbit-icon{position:relative;display:grid;place-items:center;width:28px;height:28px;border:1px solid #7990c2;border-radius:50%;font-size:20px}.orbit-icon i{position:absolute;top:-4px;right:1px;width:6px;height:6px;border-radius:50%;background:#e07da9}.orbit-search kbd{padding:4px 6px;border-radius:5px;background:#e2e9f3;color:#7d8da6;font:9px Arial}.orbit-search:focus-within{border-color:#6f83e4;box-shadow:0 0 0 4px #7688e12b}.orbit-search:focus-within .orbit-icon{animation:orbit-search-turn 1.5s linear infinite}@keyframes orbit-search-turn{to{transform:rotate(360deg)}}