Как добавить плавный переход при добавление классов?

Question

[Никита]

Как добавить плавный переход при добавление классов?
У меня есть кнопка с такими стилями:

border: 1px solid #FFFFFF;
background-color: transparent;

При клике я делаю ее активной, добавляя класс с такими стилями:

background: linear-gradient(66.7deg, #EE3E7C 9.43%, #01B37D 92.62%);
border: none;

Только все это происходит резко без плавности, transition не работает
Можно ли это как-то решить?

Comments

[Ankhena]

Градиент делать для псевдоэлемента и изменять ему прозрачность.

Answer 1

[Eugene Chefranov]

Comments

[Никита]

Я примерно так же сделал)
Только вот у меня текста не видно, когда кнопка активная, вроде как это проблема в z-index, менял его не помогает

Не посмотришь что не так, пожалуйста?
https://nikitabudkovskiy.github.io/hookah-mixer/
Нажми пропустить как приложение загрузится и там уже будут эти кнопки

[Eugene Chefranov]

Никита, дай z-index: -1;

[Никита]

Eugene Chefranov, before задать? Делал, вот так получается

[Eugene Chefranov]

Никита, добавь баттону z-index: 1;и position:relative;

[Никита]

Eugene Chefranov, забыл добавить z-index, да работает, теперь)
Только вот плавность такая же, у вас так же ?

[Eugene Chefranov]

Никита, вы псевдоэлемент before добавляете по классу, а он должен быть изначально у button с opacity: 0, а у довешеваемого класса у псевдоэлемента opacity: 1; ну и про transition у псевдоэлемента не забыть

[Никита]

Eugene Chefranov, разобрался, спасибо большое!

[Eugene Chefranov]

Никита, ну и чтобы кнопки не дергались при переключении то border не убирайте, а делайте прозрачным. А то получается что кнопка уменьшается на 1px с каждого края

[Никита]

Eugene Chefranov, сделал, теперь все красиво, еще раз спасибо)