Cyber Scanning Passcode Input

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="cyberscan-wrap"><input type="password" maxlength="6" value="123456"><span class="cyberscan-beam"></span></div>

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

.cyberscan-wrap { position: relative; width: 140px; margin: auto; overflow: hidden; border-radius: 6px; border: 1px solid #00f0ff; background: rgba(0, 240, 255, 0.05); }
.cyberscan-wrap input { width: 100%; background: transparent; border: none; padding: 8px; font-family: monospace; font-size: 12px; color: #00f0ff; letter-spacing: 6px; text-align: center; outline: none; box-sizing: border-box; }
.cyberscan-beam { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.4), transparent); animation: cyberscan-sweep 2s infinite linear; pointer-events: none; }
@keyframes cyberscan-sweep { 100% { left: 100%; } }