gazes12
@gazes12

Как корректно сделать плавное изменение цвета кнопки при hover?

https://codepen.io/gazes12/pen/dydzzZZ

Должно быть так:
628a6e0c3ebc5441287257.png

При hover хочу сделать плавное изменение цвета на красный. Пробую через псевдоэлемент, путем изменение ширины с 0 на 100% при hover, ну как видите работает оно некорректно, кнопка теряет свою ширину.
  • Вопрос задан
  • 261 просмотр
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Можно сделать например так:

.quality__button--all {
    margin-right: 13px;
    position: relative;
    background: #FF6428;
    border-radius: 40px;
    padding: 18px 45px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
}


.quality__button--all::before {
    content: "";
    background: #FF6428;
    color: #fff;
    background: red;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: width 0.3s linear;
}

.quality__button--all:hover::before {
    width: 100%;
}

.quality__button.quality__button--all::after {
    content: "Get the App";
    position: relative;
    color: inherit;
}


Ещё можно сделать без изменения ширины с помощью transform: translate:

.quality__button--all::before {
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s linear;
}

.quality__button--all:hover::before {
    transform: translateX(0);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IlyaMalone
@IlyaMalone
Frontend Developer
С помощью свойства transition можно сделать плавный переход.

CodeOpen
Ответ написан
Ваш ответ на вопрос

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

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