1

我有一个带有渐变的按钮,我希望渐变在悬停时切换方向。这是开始的 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 */
}

有没有办法做到这一点?

4

2 回答 2

2

只需在linear-gradient属性内切换颜色位置即可。

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

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

于 2013-04-11T17:17:10.677 回答
1

您只能通过保持渐变代码相同并在渐变颜色之前添加“顶部”来实现更改渐变方向:

.button-1:hover {
    background-image: linear-gradient(to top, #299c0f 20%, #1a7b09 80%);
{
于 2013-04-11T18:00:29.413 回答