CSS filter making element dissapear - html

Question

I haven't found any good answers for this so I'm asking here; I have buttons on my website that i'm trying to mimic an OS X Lion style with, and I'm using keyframes to make an active button have a sort-of glow effect. However, using filter: brightness(x) for some reason is making my element disappear. Could it be because I'm using pseudo elements for the border? Or something else.
I tried using CSS filters to brighten a background gradient (I tried an image as well with the same results) and it ended up making the element disappear and show me my pseudo element (also I can't find the code snippet button anymore, is it gone?)
button {
padding: 5px 16px;
border-radius: 4px;
outline: none;
background: linear-gradient(to bottom, #fff 0 30%, #e2e2e2 70% 100%);
color: black;
border: none;
position: relative;
transform-style: preserve-3d;
letter-spacing: -0.3px;
text-shadow: -0.5px -0.5px 1px rgba(0, 0, 0, 0.1);
transition: 0s;
font-family: "Lucida Grande", sans-serif;
transform: scale(4);
margin: 200px;
}
button::after {
content: '';
position: absolute;
background: rgb(120, 120, 120);
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
transform: translateZ(-1px);
border-radius: 5px;
opacity: 1;
z-index: -1;
}
button:active {
background: linear-gradient(to bottom, rgb(188, 206, 233) 0, rgb(115, 158, 227) 50%, rgb(92, 145, 226) 51%, rgb(174, 215, 231) 100%);
animation: glow 1s infinite;
}
button:active::after {
content: '';
position: absolute;
background: linear-gradient(to bottom, rgb(89, 92, 169) 0 40%, rgb(80, 89, 142) 60% 100%);
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
transform: translateZ(-1px);
border-radius: 5px;
opacity: 1;
}
#keyframes glow {
0% {
filter: brightness(1.1);
}
50% {
filter: brightness(1.2);
}
100% {
filter: brightness(1.1);
}
}
<button>Button</button>
JSFiddle if there isn't a run snippet button

Answer 1

According to this answer, it seems that this is because filter overrides transform-style: preserve-3d, which then causes translateZ(-1px) to have unexpected result in this use case.
This could be avoided by refactor the styles without 3D transforms such as translateZ(-1px). While it might not be perfect, here is a possible example with the workaround.
This example moved styles on the original ::after to a ::before, and moved the button background style to a new ::after, as an alternative approach to the use of translateZ(-1px) to display the button background.
Hope this will help.
Example:
button {
padding: 5px 16px;
border-radius: 4px;
outline: none;
color: black;
border: none;
position: relative;
letter-spacing: -0.3px;
text-shadow: -0.5px -0.5px 1px rgba(0, 0, 0, 0.1);
transition: 0s;
font-family: "Lucida Grande", sans-serif;
transform: scale(2);
margin: 50px 100px;
}
button:active {
animation: glow 1s infinite;
}
button::before {
content: '';
position: absolute;
background: rgb(120, 120, 120);
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -0.625px;
top: -0.625px;
border-radius: 5px;
opacity: 1;
z-index: -1;
}
button:active::before {
content: '';
position: absolute;
background: linear-gradient(to bottom, rgb(89, 92, 169) 0 40%, rgb(80, 89, 142) 60% 100%);
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -0.625px;
top: -0.625px;
border-radius: 5px;
opacity: 1;
}
button::after {
content: '';
position: absolute;
inset: 0;
border-radius: 4px;
outline: none;
background: linear-gradient(to bottom, #fff 0 30%, #e2e2e2 70% 100%);
border: none;
transition: 0s;
z-index: -1;
}
button:active::after {
background: linear-gradient(to bottom, rgb(188, 206, 233) 0, rgb(115, 158, 227) 50%, rgb(92, 145, 226) 51%, rgb(174, 215, 231) 100%);
}
#keyframes glow {
0% {
filter: brightness(1.1);
}
50% {
filter: brightness(1.2);
}
100% {
filter: brightness(1.1);
}
}
<button>Button</button>