<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="meteor-input">
  <span>
    ✦
  </span>
  <input type="email" placeholder="hello@starlight.com">
  <i>
  </i>
</label>

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

.meteor-input{position:relative;display:flex;align-items:center;gap:10px;width:270px;padding:12px 14px;overflow:hidden;border:1px solid #5366aa;border-radius:999px;background:#171b31;color:#e8edff;font-family:Arial}.meteor-input span{color:#f2cf73;font-size:18px}.meteor-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#e8edff;font-size:14px}.meteor-input input::placeholder{color:#98a5cb}.meteor-input i{position:absolute;top:0;bottom:0;left:-40px;width:22px;background:linear-gradient(90deg,transparent,#9befff,transparent);transform:skewX(-28deg);opacity:0}.meteor-input:focus-within{box-shadow:0 0 13px #7186ff66}.meteor-input:focus-within i{animation:meteor-run 1.3s ease-in-out infinite}@keyframes meteor-run{20%{opacity:1}80%{left:290px;opacity:1}100%{left:290px;opacity:0}}