悬停时背景颜色的渐变按钮会闪烁

Question

正如您在下面的代码片段中看到的，我有一个带有线性渐变背景的按钮。在悬停中我想将其更改为单色。当我尝试这种效果时，我得到了一种闪烁效果，背景消失，然后背景颜色出现。有什么解决方法可以防止这种闪烁效应吗？

a {
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 3px;
  padding: 5px 20px;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
  border: none;
  outline: none;
}

a:hover {
  background-image: none;
  background-color: #33afbd;
}

<a href="#">Button</a>

Answer 1

我只用于background那些。并用background:linear-gradient(#33afbd,#33afbd);代替background-color:#33afbd;

a {
  text-transform: uppercase;
  border-radius: 3px;
  padding: 5px 20px;
  transition: all .4s ease-in-out;
  background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
  border: none;
  outline: none;
}

a:hover {
  background:linear-gradient(#33afbd,#33afbd);
}

<a href="#">Button</a>