Измените направление градиента на зависание

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