Html/Css 当我悬停在按钮上时闪烁

Question

我一直在这里寻找一些解决方案，但我似乎很愚蠢地按照我需要的方式改变它，所以我决定做一个 post。以下问题：

button {
  font-family: custom-bold;
  width: 100%;
  font-size: 1.1rem;
  outline: none;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.322);
  border: none;
  border-radius: 5px;
  color: white;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
}

button:hover {
  background-color:rgb(255, 255, 255);
  display: inline-block;
  transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  transition-property: color;
  transition-duration: 0.5s;

  color:rgb(0, 0, 0);
  
}

<button>thatsabutton</button>

当你将鼠标悬停在它上面时，它会闪烁。例如，当我用 1% 向它添加边距顶部时，我会防止闪烁，但它会与我所做的其他事情一起结束。知道我可以做些什么来防止它而不增加边距吗？问候！

Answer 1

您只是在转换颜色，将其更改为 'all' 就可以了。也将其添加到按钮 class 以进行反向操作。

button {
  font-family: custom-bold;
  width: 100%;
  font-size: 1.1rem;
  outline: none;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.322);
  border: none;
  border-radius: 5px;
  color: white;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
    transition-property: all;
  transition-duration: 0.5s;
}

button:hover {
  background-color:rgb(255, 255, 255);
  display: inline-block;
  transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  transition-property: all;
  transition-duration: 0.5s;

  color:rgb(0, 0, 0);
  
}

<button>thatsabutton</button>

Html/Css 当我悬停在按钮上时闪烁

Html/Css flickering when i hover over a button

html

css

hover