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

CodePudding user response：

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>