[BUG] Active state of the button with custom background color not working

Photoshop
, , ,
4

I just played around and found the exact issue. It’s the ::after and empty content

HTML:

<sp-action-button class="button1">Flame</sp-action-button>
<sp-action-button class="button2">hi</sp-action-button>

CSS:

sp-action-button.button1:after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
    border-bottom-color: red;
}

sp-action-button {
   margin: 10px;
   padding: 5px 10px;
   border-radius: 5px;
   background-color: green;
   border-width: 1px;
   border-top-color: purple;
}

sp-action-button:active {
   background-color: red;
}

I need a single border color and as you can see it doesn’t normally work. I then took your advice to fake borders with ::after and implemented it.

And borders still work, but now background is broken, which did work - it broke with one of the recent versions of Ps. Also, as I mentioned, switching :active state in Dev Tools, switches it without issue