При hover'е на кнопку прыгает цвет (именно цвет). Почему?

Question

[Kostiantyn Kondratiuk]

На сайте https://poet.konkos.net/ есть кнопка, которая на скрине выше.
При ховере на неё прыгает фон (красный цвет резко появляется когда убрать курсор с кнопки).
Бекграунд при ховере прописан градиентом (скопирован из макета в Фигме).
Думаю, что загвоздка в градиенте но не знаю как разобраться.

.btn {
    font-family: "Amatic SC", cursive;
    font-weight: 700;
    color: #fff;
    background: #e76969;
    font-size: 28px;
    max-width: 230px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 15px 0;
    border: 1px solid #e76969;
    cursor: pointer;
}

.btn:hover {
    background: linear-gradient(149.51deg, #ffffff -13.36%, rgba(255, 255, 255, 0.1) 170.1%), #e54a3a;
    color: #e45858;
    border: 1px solid #e76969;
}

a,
a:hover,
a:active {
    text-decoration: none;
}

a,
button,
input,
textarea {
    transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

.payment-btn,
.reserve-btn,
.feedback-btn {
    background: #ffffff;
    border: 1px solid #e76969;
    color: #e76969;
}

Comments

[Raloynner]

градиент можешь через after сделать opacity 0 и при ховере opacity 1

Answer 1

[Вадим]

При hover'е на кнопку прыгает цвет

Потому https://qna.habr.com/q/492359

И потому:
https://habr.com/ru/company/htmlacademy/blog/337274/

UPD:
Можно анимировать градиент через изменение его позиции

Comments

[Kostiantyn Kondratiuk]

Там в примере расписан бэкграунд не одной строкой. Как его вытянуть из Фигмы в таком виде?
Или в какую сторону копать чтобы изучить этот вопрос?

И при ховере в примере:

background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);

Откуда эти значения? Или надо просто перечитать инфу о градиентах?

[Вадим]

Kostiantyn Kondratiuk,

Там в примере

Где "там" и в каком "примере"?

[Kostiantyn Kondratiuk]

Вадим, пока я писал комент вы добавили вторую ссылку. Я не такой быстрый как вы, к сожалению).

Вот по этому линку:

Потому https://qna.habr.com/q/492359

Вот пример из вопроса по линку выше

[Вадим]

Kostiantyn Kondratiuk,

Как его вытянуть из Фигмы в таком виде

Никак. Это ручками написано. Фигма не про вёрстку, а про картинки.
Свойство background-image не анимируется.
Но можно изначально задать блоку градиент, который ощутимо больше блока.
Сместить фоновую картинку(градиент) с помощью background-position.
А при ховере сделать transition на background-position.
Тогда создастся эффект плавного рисования градиента, хотя на деле он просто сместится и из "невидимой" области, перейдёт в видимую.

[Kostiantyn Kondratiuk]

Вадим, Ок. Спасибо за ответ.
Хоть и немного чувствую себя мужиком на фоне красного ковра, который говорит, что очень интересно...) Ну направление есть и это уже гуд).

[Вадим]

Kostiantyn Kondratiuk, вот так это выглядит
https://codepen.io/jdsteinbach/pen/eGmpmP

Answer 2

[Kostiantyn Kondratiuk]

Прописал самой кнопке такой же градиент как и вытянул из Фигмы для hover`а только цвет поставил изначальный:

background: linear-gradient(149.51deg, #ffffff -13.36%, rgba(255, 255, 255, 0.1) 170.1%);

вместо простого: background-color: #ffffff; и перестал цвет прыгать при hover`е.
И плавность присутствует.