CSS градиент фона к белому после клика - PullRequest
Новая
       5

CSS градиент фона к белому после клика

0 голосов
/ 09 января 2020

Я создал функцию, которая добавляет следующий класс к моей кнопке после нажатия на кнопку: 

.animate-btn-gradient {
    animation: gradientBtn 1s ease;
}

Ключевой кадр градиентBtn выглядит следующим образом: 

@keyframes gradientBtn {
    0% {
        background: linear-gradient(45deg, #289af5 30%, #00ffff 100%);
        background-position: 1vh;
    }

    100% {
        background: linear-gradient(45deg, #00ffff 30%, #fff 100%);
        background-position: 162vh;
    }
}

В основном кнопка имеет градиент в качестве фона (белый - синий), и я бы хотел, чтобы кнопка перешла на белый.

Класс, который добавляет градиент по умолчанию, выглядит следующим образом: 

.btn-gradient {
    background: linear-gradient(45deg, #289af5 30%, #00ffff 100%);
}

Пока Я сделал это:

https://codepen.io/utglobal/pen/abzYVwV

Но переход не гладкий, это выглядит ужасно.

...