CSS CODE


                    #mainmenu ul{
                        display: inline-flex;
                        flex-flow: row;
                        border: none;
                        height: 1.25em;
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }
                    #mainmenu a{
                        text-decoration: none;
                        color: yellow;
                    }
                    #mainmenu a:hover{
                        color: black;
                        background:yellow;
                    }
                    #mainmenu ul > li + li::before {
                        content: '*';
                        margin: 0 2em;
                    }

HTML CODE


<nav id='mainmenu'>
    <ul>
        <li><a href='#'>Menu 1</a></li>
        <div><a href='#'>Menu 2</a></li>
        <div><a href='#'>Menu 3</a></li>
        <div><a href='#'>Menu 4</a></li>
        <div><a href='#'>Menu 5</a></li>
    </ul>
</nav>

Neon Button

CSS CODE


                    :root{
                        --neon-color:hsl(258 97% 46% / 1);
                    }
                    .neon_box{
                        all:unset;
                        font-size: 2rem;
                        color:var(--neon-color);
                        position:relative;
                        display:inline-block;
                        cursor:pointer;
                        border: 0.1em solid var(--neon-color);
                        padding:0.3em 1em;
                        border-radius:0.15em;
                        text-shadow:
                            0 0 0.12em hsl(0 0% 100% / .125),
                            0 0 1em var(--neon-color);
                        box-shadow:
                            inset 0 0 0.5em var(--neon-color),
                            0 0 0.5em var(--neon-color);
                    }
                    .neon_box::before{
                        content:"";
                        position:absolute;
                        background:var(--neon-color);
                        height:50%;
                        width:100%;
                        left:0;
                        top: 115%;
                        transform: perspective(1.5em) rotateX(20deg) scale(1.05, 0.3);
                        filter:blur(1em);
                    }
                    .neon_box:hover,
                    .neon_box:focus{
                        background:var(--neon-color);
                        color:black;
                        box-shadow:
                            0 0 2em var(--neon-color);
                    }
                    .neon_box:hover::before,
                    .neon_box:focus::before{
                        transform: perspective(0.5em) rotateX(20deg) scale(1.1, 0.4);
                    }

Color Glow Text

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo cum voluptatem error ullam suscipit deserunt tempore iusto,
quaerat eaque, quo ipsam odit qui. Explicabo delectus fuga debitis veritatis deleniti iure?

:root{
                    --neon-color:hsl(258 97% 46% / 1);
                }
                .neon_box{
                    all:unset;
                    font-size: 2rem;
                    color:var(--neon-color);
                    position:relative;
                    display:inline-block;
                    cursor:pointer;
                    border: 0.1em solid var(--neon-color);
                    padding:0.3em 1em;
                    border-radius:0.15em;
                    text-shadow:
                        0 0 0.12em hsl(0 0% 100% / .125),
                        0 0 1em var(--neon-color);
                    box-shadow:
                        inset 0 0 0.5em var(--neon-color),
                        0 0 0.5em var(--neon-color);
                }
                .neon_box::before{
                    content:"";
                    position:absolute;
                    background:var(--neon-color);
                    height:50%;
                    width:100%;
                    left:0;
                    top: 115%;
                    transform: perspective(1.5em) rotateX(20deg) scale(1.05, 0.3);
                    filter:blur(1em);
                }
                .neon_box:hover,
                .neon_box:focus{
                    background:var(--neon-color);
                    color:black;
                    box-shadow:
                        0 0 2em var(--neon-color);
                }
                .neon_box:hover::before,
                .neon_box:focus::before{
                    transform: perspective(0.5em) rotateX(20deg) scale(1.1, 0.4);
                }

Rainbow Text

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo cum voluptatem error ullam suscipit deserunt tempore iusto,
quaerat eaque, quo ipsam odit qui. Explicabo delectus fuga debitis veritatis deleniti iure?


                :root{
                    --rainbow-color1: 255,0,0;
                    --rainbow-color2: 200,200,0;
                    --rainbow-color3: 0,255,0;
                }
                .rainbow{
                    animation: rainbowanimation 6s linear infinite;
                    background: linear-gradient(
                        45deg,
                        rgb(var(--rainbow-color1)),
                        rgb(var(--rainbow-color2)),
                        rgb(var(--rainbow-color3)),
                        rgb(var(--rainbow-color2)),
                        rgb(var(--rainbow-color1))
                    );
                    background-size:200%;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    white-space:no-wrap;
                }
                @keyframes rainbowanimation{
                    from{
                        background-position: 0% center;
                    }
                    to{
                        background-position: -200% center;
                    }
                }