Div 按钮悬停：过渡线性渐变答案

【问题标题】：Div Button hover: transition linear gradientDiv 按钮悬停：过渡线性渐变
【发布时间】：2021-12-13 05:24:58
【问题描述】：

您好，我有一个带有标签和标签的 div，用于创建这样的按钮：

https://media.giphy.com/media/LXBvjTlqqPZNxB0Mtr/giphy.gif

但是我没有得到我想要的线性渐变 css 悬停过渡效果：像这样： https://media.giphy.com/media/Db7n9RI9a6OrLh2XlP/giphy.gif

这就是我的 html 骨架的样子：

<div class="address-btn">
            <a href="#">Copy Address</a>
            <i class="fas fa-wallet"></i>
          </div>

这是我的css

.address-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5px;
  transition: all 1s ease;
  cursor: pointer;
  border: 2px;
  color: #fff;
  background: linear-gradient(to right, #2393ff 0%, #5f01ff 100%);
  border-radius: 3px;
  a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
    font-size: 13px;
  }



  &:hover {
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    background: linear-gradient(to right, #5f01ff 0%, #2393ff 100%);
  }

为什么我没有得到和正确的一样的效果？

【问题讨论】：

这并没有改变任何东西..我的过渡太快了，不知道为什么
对不起，我以为你想让它像第一个 gif 一样
这能回答你的问题吗？ Use CSS3 transitions with gradient backgrounds

标签： html css animation

【解决方案1】：

一切正常。你错过了} andd.. 看看这个

.address-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 5px;
    transition: all 1s ease;
    cursor: pointer;
    border: 2px;
    color: #fff;
    background: linear-gradient(to right, #2393ff 0%, #5f01ff 100%);
    border-radius: 3px;
}

.address-btn:hover{
    background: linear-gradient(to right, #5f01ff 0%, #2393ff 100%);
}

a{
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}

<div class="address-btn">
    <a href="#">Copy Address</a>
</div>

【讨论】：