마우스 오버시 그라디언트 방향 만 변경하십시오.

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