*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.cyber-btn {
position: relative;
background: transparent;
color: #ffffff;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 4px;
padding: 20px 40px;
border: 2px solid #00fffc;
border-radius: 0;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(0, 255, 252, 0.5), inset 0 0 10px rgba(0, 255, 252, 0.5);
overflow: hidden;
transition: all 0.2s;
}
.cyber-btn:hover {
background: rgba(0, 255, 252, 0.1);
box-shadow: 0 0 20px rgba(0, 255, 252, 0.8), inset 0 0 20px rgba(0, 255, 252, 0.8);
}
/* Red Glitch Layer */
.cyber-btn::before {
content: attr(data-text);
position: absolute;
top: 0;
left: -2px;
width: 100%;
height: 100%;
color: #ff003c;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
/* Blue Glitch Layer */
.cyber-btn::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 2px;
width: 100%;
height: 100%;
color: #00fffc;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
0% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(-2px, 2px); }
20% { clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); transform: translate(2px, -2px); }
40% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translate(-2px, -2px); }
60% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(2px, 2px); }
80% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(-2px, 2px); }
100% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: translate(2px, -2px); }
}
@keyframes glitch-anim-2 {
0% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(2px, -2px); }
20% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(-2px, 2px); }
40% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: translate(2px, 2px); }
60% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(-2px, -2px); }
80% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: translate(2px, -2px); }
100% { clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%); transform: translate(-2px, 2px); }
}
