<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="constellation-input">
  <span>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </span>
  <input type="text" placeholder="Name a new star">
  <b>
    ✦
  </b>
</label>

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

.constellation-input{display:flex;align-items:center;gap:9px;width:276px;padding:10px 12px;border-radius:10px;background:#151a2b;color:#e8efff;font-family:Arial}.constellation-input span{position:relative;width:43px;height:30px;background:linear-gradient(25deg,transparent 47%,#52678e 48% 51%,transparent 52%),linear-gradient(-30deg,transparent 47%,#52678e 48% 51%,transparent 52%)}.constellation-input span i{position:absolute;width:5px;height:5px;border-radius:50%;background:#7182aa}.constellation-input span i:nth-child(1){top:4px;left:4px}.constellation-input span i:nth-child(2){top:18px;left:17px}.constellation-input span i:nth-child(3){top:3px;right:5px}.constellation-input span i:nth-child(4){right:5px;bottom:2px}.constellation-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#e8efff;font-size:14px}.constellation-input b{color:#f1cc70}.constellation-input:focus-within span i{background:#fff;box-shadow:0 0 8px #a9c5ff;animation:star-light 1s infinite}.constellation-input:focus-within span i:nth-child(2){animation-delay:.15s}.constellation-input:focus-within span i:nth-child(3){animation-delay:.3s}.constellation-input:focus-within span i:nth-child(4){animation-delay:.45s}@keyframes star-light{50%{transform:scale(1.7)}}