:root {
    --clr-neon: rgb(255, 20, 20);
    --clr-bg: rgb(0, 0, 0);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.neon-button {
    font-size: 2rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;
    border-radius: 0.25em;
    padding: 0 1em;
    text-shadow: 0 0 0.125em hsl(0 0% 100% /0.5%), 0 0 0.5em currentColor;
    box-shadow: inset 0 0 .5em 0 currentColor, 0 0 .5em 0 currentColor;
    position: relative;
}

.neon-button::before {
    pointer-events: none;
    content: '';
    position: absolute;
    background: var(--clr-neon);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: perspective(2em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1.5em);
    opacity: .7;
}

.neon-button::after {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    box-shadow: 0 0 2em 0.5em var(--clr-neon);
    opacity: 0;
    transition: opacity 100ms linear;
}

.neon-button:hover,
.neon-button:focus {
    background: var(--clr-neon);
    color: var(--clr-bg);
    text-shadow: 0;
}

.neon-button:hover::before,
.neon-button:focus::before {
    opacity: 1;
}

.neon-button:hover::after,
.neon-button:focus::after {
    opacity: 1;
}