CSS Working In Preview Only

DreamStreetPortraits

Hello!

I'm trying to apply the Hover Glow Effect CSS animation seen here https://dev.to/webdeasy/top-20-css-buttons-animations-f41 to the button titled 'My Button' on the homepage of my site https://www.monalightstudios.com/

The CSS shows correctly while previewing the changes. However, once I publish the changes it no longer glows. I have no idea how to get it to work! Does anyone know why it only works in the preview?

Here is a copy of the code I'm using.

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark{
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
position: relative;
z-index: 0;
border-radius: 10px;
}

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 15px;
}

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark:active {
color: #000
}

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark:active:after {
background: transparent;
}

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark:hover:before {
opacity: 1;
}

.sm-button.sm-page-widget-button-outline.sm-page-widget-button-text-dark:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 15px;
}

@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}}