如何在此按钮上放置一个简单的过渡？答案

【问题标题】：How do I put a simple transition on this button?如何在此按钮上放置一个简单的过渡？
【发布时间】：2022-01-13 22:50:36
【问题描述】：

我已经用渐变制作了这个简单的按钮，但是如何使过渡起作用？我尝试使用transition: .2s linear，但它不起作用。

.contact_button {
    color: white;
    font-size: 20px;
    width: 130px;
    height: 50px;
    border: solid 4px transparent;
    border-radius: 80px;
    background-image: linear-gradient(black, black), linear-gradient(to right ,#00AEAD, #72CC50);
    background-origin: border-box;
    background-clip: content-box, border-box;
    cursor: pointer;
}

.contact_button:hover {
    background-image: linear-gradient(transparent, transparent), linear-gradient(to right ,#00AEAD, #72CC50);
}

&lt;button class="contact_button"&gt;Contact&lt;/button&gt;

【问题讨论】：

只需在 .contact_button css 类中添加一个过渡，过渡：0.5s;
@DragonInTraining 这就是重点，这不起作用..
可能是因为你使用了渐变。因为过渡应该这样做，您是否尝试过不使用渐变和简单的背景颜色来查看问题是否仍然存在？
我不能只删除渐变，它是样式的一部分。
您不必删除它，但您必须解决它。我查了一下，似乎渐变和过渡不是最好的朋友。但是，有一些变通方法是使用 CSS 通过小技巧来创建渐变过渡。我建议您查找它们并使用适合您需要的任何示例。祝你好运！

标签： html css

【解决方案1】：

使用mix-blend-mode 做不同的事情，您可以将过渡应用到background-color

.contact_button {
    color: white;
    font-size: 20px;
    width: 130px;
    height: 50px;
    border: solid 4px transparent;
    border-radius: 80px;
    background: 
      linear-gradient(to right ,#00AEAD, #72CC50) border-box,
      #000 content-box;
    background-blend-mode:darken;
    cursor: pointer;
    transition:0.5s;
}

.contact_button:hover {
    background-color:#0000;
}

&lt;button class="contact_button"&gt;Contact&lt;/button&gt;

【讨论】：