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

Question

[gazes12]

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

Должно быть так:


При hover хочу сделать плавное изменение цвета на красный. Пробую через псевдоэлемент, путем изменение ширины с 0 на 100% при hover, ну как видите работает оно некорректно, кнопка теряет свою ширину.

Comments

[Ankhena]

https://css-tricks.com/property/

Answer 1

[Dino Winchester]

Можно сделать например так:

.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);
}

Comments

[gazes12]

Cпасибо огромное!

Answer 2

[kfedechkin]

https://codepen.io/kiril-fedechkin/pen/dydzZMP?edi...

Comments

[gazes12]

kfedechkin Вы не сохранили изменения

Answer 3

[Илья Корень]

С помощью свойства transition можно сделать плавный переход.

CodeOpen

Comments

[gazes12]

Не такой нужен, а чтобы линией шло, как если с 0 до 100% ширина будет меняться.