[Bug Report][3.1.14] Some of the anchor CSS properties interfere with the <v-btn> styles

[set-killer]

Environment

Vuetify Version: 3.1.14
Vue Version: 3.2.47
Browsers: Firefox 112.0
OS: Linux x86_64

Steps to reproduce

So i have defined some CSS properties for anchor active, anchor hover, anchor visited.
Those properties however reflect on the components of type <v-btn>.

Expected Behavior

I expect the <v-btn> styles to not be dependable on the <a> styles because I'm rendering a button, not a link. If i want to render an <a> tag I'll use the <a> tag alone.

Actual Behavior

The <v-btn> uses the style that are defined for the <a> tags.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Probably adding !important to some of the color css properties would resolve the issue (hopefully).

[KaelWD]

We can't account for every possible combination of custom styles you might apply, you'll have to handle this in your own CSS. Also #15596 somewhat.

If i want to render an <a> tag I'll use the <a> tag alone.

Don't use the href or to props then if you don't want it to render an <a>

[set-killer]

Don't use the href or to props then if you don't want it to render an <a>

Then what should I use? The other option would be to use button with the @click event and then manually reroute the user to the new location. This looks bad...

And also the <a> tags are quite common to use. Not every anchor should be rendered as a button, and not every button should be rendered as an anchor. There should be a clear separation between the buttons and the anchors.

In Vuetify there are already some color css properties related to the buttons. Setting them to !important would resolve this issue. For example:

.v-btn--variant-elevated, .v-btn--variant-flat {
    background: rgb(var(--v-theme-surface));
    color: rgba(var(--v-theme-on-surface),var(--v-high-emphasis-opacity)) !important;
}

[overclocked555]

I use pseudo-class :not()
:not(.v-btn) a {}