更改悬停时的渐变方向

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%); 
{