Question

我有以下按钮。

上面按钮的CSS是：

＆＃13;

.cta-btn {
  display: inline-block;
  margin: 20px 0 0 20px;
  color: #fff;
  background-color: #FF8F1B;
  background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
  box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
  font-size: 21px;
  border-radius: 30px;
  padding: 12px 21px;
  font-family: Montserrat;
}

＆＃13;

<a href="#" class="cta-btn">click me</a>

＆＃13;

当我将鼠标悬停在按钮上时，我希望按钮可以平滑地更改渐变颜色。当我将鼠标悬停时，我不希望渐变颜色只是按下按钮。这是我尝试平滑渐变颜色过渡：

a.cta-btn:hover {
  background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
  color: #fff;
  box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;
}

非常感谢任何帮助。

Answer 1

简短的回答，你不能只使用背景。但是，您可以使用其他元素（或伪元素）在内部实现类似的效果，并在悬停时淡入它们。

以下示例使用两个伪元素作为两个背景状态。在悬停时，我们只是淡入新背景，提供类似的过渡效果，如果渐变是可转换的，则会发生。

注意：并非所有浏览器都支持伪元素的转换，因此您可能需要添加空元素以在旧版/不支持的浏览器上实现相同的效果。

.cta-btn {
  position: relative;
  display: inline-block;
  margin: 20px 0 0 20px;
  color: #fff;
  box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
  font-size: 21px;
  border-radius: 30px;
  overflow: hidden;
  padding: 12px 21px;
  font-family: Montserrat;
  transition: box-shadow.3s ease-in-out;
  text-decoration: none;
}

/* These are the two backgrounds, absolutely positioned to cover. */
.cta-btn::before,
.cta-btn::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
  border-radius: 30px;
  z-index: -1;
}

.cta-btn::after {
  opacity: 0;
  background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
  transition: opacity.3s ease-in-out;
}

/* On hover, transtiion the shadow of the anchor, and fade in the after element to show the new background. */
.cta-btn:hover {
  box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}
.cta-btn:hover::after {
  opacity: 1;
}

<a href="#" class="cta-btn">click me</a>

Answer 2

虽然仍然能够看到background尺寸减小和增加，但部分可能在同一元素上使用多个background属性，切换background-size属性。

.cta-btn {
  color: #fff;
  background: linear-gradient(to right, #2ab3ff, #ff2d00)
    , linear-gradient(to right,#FF2A67,#FF5D3A);
  background-size:100% 100%, 0% 0%;
  background-origin: border-box, border-box;
  box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
  font-size: 21px;
  border-radius: 30px;
  padding: 12px 21px;
  font-family: Montserrat;
  transition: background .3s linear;
}
.cta-btn:hover {
  background-size:0% 0%, 100% 100%;
  box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}

<a href="#" class="cta-btn">click me</a>

Answer 3

聚会可能要晚一点，但是我确实设法将渐变过渡到纯色，这正是我的项目所需要的。

这是概念证明的代号。

https://codepen.io/etc-umbrella/pen/pXremq

<button class="ui-button">This is a button</button>

<h2>Creating an aninmated gradient background button using only SCSS. Worked pretty good. Didn't have to use any crazy javascript</h2>

.ui-button {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  padding: 12px 18px;
  border: 1px solid aqua;
  background-color: white;
  color: #ffffff;
  font-family: raleway;
  font-weight: bold;
  font-size: 16px;
  z-index: 1;
  transition: all 800ms ease-in;
  &:after{
    content: '';
    position: absolute;
    left: -200%;
    top: 0px;
    width: 400%;
    height: 100%;
    background: rgb(33,209,159);
    background: linear-gradient(45deg, rgba(33,209,159,1) 0%, rgba(34,44,64,1) 50%, rgba(21,65,153,1) 100%);
    z-index: -1;
    transition: all 800ms ease-in;
  }
  &:hover{
    color: #ffffff;
    background-color: #21d19f;
  }
  &:hover:after{
    left: 0%;
    opacity: 0;
  }
}

Answer 4

我已经尝试了所有答案，并且我更喜欢这样：它轻巧且完美地工作，仅将鼠标悬停在背景大小的属性上和使用Chrome IE和ff

享受

.ex-button-0 {
  
    transition: all ease 0.5s;
    cursor: pointer;
    padding: 10.5px 25px;
    border: none;
    border-radius: 35px;
  
    background-image: linear-gradient(to left, black, blue, yellow, orange);
    background-size:300%;
    background-position: 0 0;
    -webkit-appearance: none !important;
    color: #000;
    text-decoration:none
}
.ex-button-0:hover {
  background-position: 100% 0;
  color:#fff;
}

<a class="ex-button-0" href="">Exemple</a>

Answer 5

@import url('https://fonts.googleapis.com/css?family=Montserrat:500');

html,body {
  font-family: 'Montserrat', sans-serif;
  margin:0;
  padding:0;
  background: linear-gradient(to right, #c9d6ff, #e2e2e2);

}

div {
  height: 100vh;
  display: flex;
  align-items:center;
  justify-content:center;
}

h1 {
  font-size: 42px;
  background-size:200%;
  padding:15px;
   border-radius:5px;
  background-image: linear-gradient(to top left, #fe87c3     0%, #D38312 50%, #A83279 100%); 
  transition: .3s ease;
  cursor: pointer;
}
h1:hover {
  background-position: 90%;
  color: #202020;
}

.home {
  background-size: 200%

}**strong text**

这是一个演示

https://codepen.io/Mikeytown19/pen/aLpNZa

CSS - 悬停时平滑按钮渐变颜色过渡

5 个答案: