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!