悬停时渐变为背景色的渐变按钮

时间:2019-02-20 14:39:53

标签: javascript html css css3 hover

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

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>

2 个答案:

答案 0 :(得分:3)

我只使用了background。并使用background:linear-gradient(#33afbd,#33afbd);代替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>

答案 1 :(得分:1)

只需将原始background-color设置为您想要的那个。

问题在于,在过渡过程中,它首先将背面设置为透明,然后将其设置为所需的颜色。

解决方案:

a {
      text-transform: uppercase;
      background-color: #33afbd;
      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;
    }
<a href="#">Button Here</a>