Custom button class not working

Hello.

I have a development site (not publicly-viewable) where I'm trying to use a second button class.

I've already read and followed instructions from https://docs.generatepress.com/article/adding-buttons/ (using the sun-flower class example).

In this case I'm creating a class called .button.dark, and when I add this class to my link in text view, I'm adding it as class="button dark" which follows the example in the link above.

However, the button is still only picking up the normal button style, not the dark style.

Here's the css I added for the new class. I've tried with and without the "important" and neither works.

.button.dark,
.button.dark:visited {
	background: #222222!important;
	color:#FFF;
}

.button.dark:hover,
.button.dark:active {
	background: #ff0055!important;
	color:#FFF;
}

Here's how the URL is structured in the HTML:

<a class="button dark" href="https://probusinesswriter.com/resources/">

But while .button and .button.dark have opposite color schemes, they're showing up as identical. When I check it Google's Inspect feature, it looks like it's finding the correct style information, but somehow not displaying it. I have no site cache on the dev site. I cleared by browser cache. And I even tried another browser that's never visited the site previously. Still I'm only seeing the main button style.

I'll attach login details so you can view it on the front-end of the site while it's locked down.

Thanks!