Fix hover style of filled buttons that are anchors

[cloudrac3r]

This partially reverts a change in 4db47a6. Here is an example reproduction:

<a href="" class="s-btn s-btn__filled">Example</a>

Since 2.5.5, hover styles on that example have not worked correctly. This is because 2.5.5 changed a selector to .s-button..&:hover..&:visited:not(:active):not(:focus). This style applies to hovered and visited buttons. When it is applied, it sets the background colour to var(--_bu-filled-bg);, which is the standard background colour. Separately, the button hover selector has also matched this button and set the background colour to var(--_bu-filled-bg-hover);, but this selector is further up the file, so it has less priority. The hover style is being overwritten by this visited style.

I've fixed hovered visited link-buttons by undoing that change, since it doesn't seem to be related to the rest of 4db47a6.

I've confirmed that this change fixes the example, and I haven't seen any negative side-effects in my use case. 😊

[netlify]

👷 Deploy request for stacks pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b480838

[dancormier]

Thanks for your contribution @cloudrac3r!

If you look at line 432, you'll see that the modification you made to exclude styling with :not(:hover)… is within a block specifically applying styles to :hover:

        &:hover {
            &.s-btn__filled {
                background-color: var(--_bu-filled-bg-hover);
                border-color: var(--_bu-filled-bc-hover);
                color: var(--_bu-filled-fc-hover);
            }

            &:not(.s-btn__outlined):not(.s-btn__filled) {
                border-color: var(--_bu-bc-hover);
            }

-            &:visited:not(:active):not(:focus) {
+            &:visited:not(:hover):not(:focus) {
                &.s-btn__filled {
                    background-color: var(--_bu-filled-bg);
                    border-color: var(--_bu-filled-bc);
                    color: var(--_bu-filled-fc);
                }

                &:not(.s-btn__outlined) {
                    background-color: var(--_bu-bg);
                    border-color: var(--_bu-bc);
                    color: var(--_bu-fc);
                }
            }
…

I believe the issue has to do with the styles from :not(.s-btn__outlined) overriding the styles applied to .s-btn__filled. It will require some investigation to resolve confidently, but for now, I've created a PR as a starting point and hope to get a fix merge in soon.