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

2022-01-22 00:00:00 hover javascript html css

正如您在以下代码段中所见，我有一个带有线性渐变背景的按钮.在悬停中，我想将其更改为单一颜色.当我尝试这种效果时，我得到了一种背景消失然后背景颜色出现的闪烁效果.是否有任何解决方法可以防止这种闪烁效果?

As you can see in the following snippet I have a button with a linear gradient background. In the hover I want change it to a single color. When I try this effect I am getting like a blink effect which the background disappears and then the background color appears. Is there any workarounds to prevent this blinking effect?

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>

推荐答案

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

I used only background for those. And used background:linear-gradient(#33afbd,#33afbd); instead of background-color:#33afbd;

a {
  text-transform: uppercase;
  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: 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>

相关文章