<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="wave-password">
  <small>
    PRIVATE ACCESS
  </small>
  <div>
    <span>
      ✦
    </span>
    <input type="password" placeholder="Enter passphrase">
    <button type="button" aria-label="Show password">
      ◉
    </button>
  </div>
  <i>
    <b>
    </b>
    <b>
    </b>
    <b>
    </b>
    <b>
    </b>
    <b>
    </b>
  </i>
</label>

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

.wave-password{display:block;width:275px;padding:14px;border-radius:13px;background:#202334;color:#f5f7ff;font-family:Arial;box-shadow:0 9px 17px #20233444}.wave-password small{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#a7a7e7}.wave-password>div{display:flex;align-items:center;gap:9px;margin-top:10px}.wave-password span{color:#70e3cc}.wave-password input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px}.wave-password input::placeholder{color:#7d82a2}.wave-password button{border:0;background:transparent;color:#bac3e3;cursor:pointer}.wave-password>i{display:flex;gap:4px;align-items:center;height:10px;margin-top:8px;font-style:normal}.wave-password i b{width:100%;height:2px;border-radius:3px;background:#46506b;transition:.3s}.wave-password:focus-within i b{background:#70e3cc;animation:wave-password .7s ease-in-out infinite}.wave-password:focus-within i b:nth-child(2){animation-delay:.1s}.wave-password:focus-within i b:nth-child(3){animation-delay:.2s}.wave-password:focus-within i b:nth-child(4){animation-delay:.3s}.wave-password:focus-within i b:nth-child(5){animation-delay:.4s}@keyframes wave-password{50%{transform:scaleY(3)}}