Question

我有一个带渐变的按钮，我希望渐变可以在悬停时切换方向。这是起始CSS：

.button-1 {
    border: 1px solid #15440a;
    border-radius: 2px;
    color: white;
    background-color: #2890b;
    background-image: linear-gradient(#299c0f 20%, #1a7b09 80%);
    font-size: 13px;
}

我想做这样的事情：

.button-1:hover {
    /* change just direction of gradient */
    /* keep colors the same */
}

有没有办法做到这一点？

Answer 1

只需在linear-gradient属性中切换颜色位置。

   .button-1:hover {
        background-image: linear-gradient(#1a7b09 20%, #299c0f 80%);
    }

http://jsfiddle.net/EkYE5/1/

Answer 2

只有保持渐变代码相同，并在渐变颜色之前添加“顶部”，才能实现更改渐变方向：

.button-1:hover {
    background-image: linear-gradient(to top, #299c0f 20%, #1a7b09 80%);
{

在悬停时只改变渐变的方向

2 个答案: