.glow-button { position: relative; margin: 15px 0 0 10px; display: inline-block; text-align: center; padding: 12px 30px; white-space: nowrap; font-size: 16px; font-weight: bold; color: var(--light-text); background-color: var(--background); border: none; cursor: pointer; border-radius: 50px; overflow: hidden; z-index: 1; transition: background 0.3s ease; text-decoration: none; } .glow-button::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, #E0FFFF, #00FFE0, #ff0000, #ff9900, #00ffcc, #00ccff, #ff00ff, #ff0000); background-size: 400% 400%; animation: glowingBorder 6s linear infinite; z-index: -1; filter: blur(5px); } .glow-button::after { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; background: var(--background); border-radius: 50px; z-index: -1; } @keyframes glowingBorder { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }