coderhood-ui/src/components/buttons/GlitchButton.css

UI Library

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

.glitch-btn {
    --glitch-content: "Cyberpunk Glitch";
    --glitch1-color: #ff0000;
    --glitch2-color: #00ffff;
    --color : #ffd700;
    position: relative;
    padding: 15px 40px;
    font-size: 24px;
    font-family: "Orbitron", sans-serif;
    color: var(--color);
    background: transparent;
    border: 3px solid var(--color);;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s ease;
}

.glitch-btn:hover {
    background: rgba(255, 215, 0, 0.1); /* Default fallback */
    background: color-mix(in srgb, var(--glitch-color) 10%, transparent);
}


.glitch-btn.glitch::before,
.glitch-btn.glitch::after {
    content: var(--glitch-content);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glitch-btn.glitch::before {
    top: 5px;
    left: -10px;
    color: var(--glitch1-color);
    border: 3px solid var(--glitch1-color);
    animation: glitch-move 0.1s infinite;
}

.glitch-btn.glitch::after {
    top: -10px;
    left: 5px;
    color: var(--glitch2-color);
    border: 3px solid var(--glitch2-color);;
    animation: glitch-move 0.1s infinite reverse;
}


@keyframes glitch-move {
    0% {
        transform: translateX(5px);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}