Не работает transition по linear-gradient

Question

Всем привет!

Когда я использую смена цвета через hover таким образом:

.button {
    background: linear-gradient(180deg, #EEF2EE, #D4D4D4);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.button:hover{
    background: #FFDC29;
}

Мой элемент buttom становится прозрачным между обычным состоянием и hover.

Помогите правильно реализовать смену цвета, спасибо!

Answer 1

Обычно пользуются следующим трюком:

.button {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, #EEF2EE, #D4D4D4);
  z-index: 1000;
}

.button::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFDC29;
  transition: opacity 0.5s ease-in-out;
  z-index: -1000;
}

.button:hover::before {
  opacity: 1;
}

<div class="button">Button</div>

Т.к transition по gradient'ам все еще не поддерживается.

БЛОГ НА HUSL

Не работает transition по linear-gradient

Ответы (1 шт):