Cyberpunk Glitch Hover Button

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="cyberglitch-button"><span class="cyberglitch-label">SYSTEM_START</span><span class="cyberglitch-glitch"></span></button>

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

.cyberglitch-button { position: relative; padding: 10px 22px; background: #ffe600; color: #000; font-family: monospace; font-size: 10px; font-weight: 900; border: none; cursor: pointer; letter-spacing: 2px; clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%); display: block; margin: auto; transition: background 0.2s; }
.cyberglitch-button:hover { background: #00f0ff; color: #000; }
.cyberglitch-button:hover .cyberglitch-glitch { position: absolute; inset: 0; background: #ff0055; opacity: 0.6; clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); animation: cyberglitch-anim 0.3s steps(2) infinite; }
@keyframes cyberglitch-anim { 0% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 100% { transform: translate(0); } }