<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="vault-input">
  <i>
  </i>
  <input type="password" placeholder="Vault key">
  <b>
    ⌑
  </b>
</label>

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

.vault-input{position:relative;display:flex;align-items:center;gap:9px;width:270px;padding:12px 14px;overflow:hidden;border:2px solid #4c5365;border-radius:9px;background:#2d3240;color:#fff;font-family:Arial}.vault-input::before,.vault-input::after{content:"";position:absolute;z-index:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#3d4556,#242a35);transition:transform .5s}.vault-input::before{left:0;border-right:1px solid #657086}.vault-input::after{right:0;background:linear-gradient(90deg,#242a35,#3d4556)}.vault-input>*{position:relative;z-index:1}.vault-input i{width:10px;height:10px;border:2px solid #f2c56a;border-radius:50%;font-style:normal}.vault-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px}.vault-input input::placeholder{color:#adb5c8}.vault-input b{color:#f2c56a}.vault-input:focus-within::before{transform:translateX(-88%)}.vault-input:focus-within::after{transform:translateX(88%)}