Kinderman
@Kinderman
Front-end Developer

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

613f292359035349705949.jpeg
На сайте 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;
}
  • Вопрос задан
  • 191 просмотр
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
При hover'е на кнопку прыгает цвет

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

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

UPD:
Можно анимировать градиент через изменение его позиции
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kinderman
@Kinderman Автор вопроса
Front-end Developer
Прописал самой кнопке такой же градиент как и вытянул из Фигмы для hover`а только цвет поставил изначальный:
background: linear-gradient(149.51deg, #ffffff -13.36%, rgba(255, 255, 255, 0.1) 170.1%);

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы