Как избавится от мерцания кнопки при hover?

Question

Подскажите пожалуйста как избавится от мерцания при hover когда отводишь мышь? Спасибо

a{
display: flex;
align-items: center;
background: #747474;
border-radius: 7px;
margin: 0;
padding: 20px 20px 20px 0px;
height: 100%;
transition: all 0.3s ease 0s;
}

a:hover {
background: linear-gradient(91.27deg, #f8a70e 0.23%, #cd650c 78.44%);
}

<a href="#">
<span>Текст</span>
</a>

Answer 1

Пример

a {
  display: flex;
  align-items: center;
  background: #747474;
  border-radius: 7px;
  margin: 0;
  padding: 20px 20px 20px 0px;
  height: 100%;  
  position: relative;
}

a::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(91.27deg, #f8a70e 0.23%, #cd650c 78.44%);
  border-radius: 7px;
  opacity: 0;
  transition: opacity .3s ease 0s;
}

a > span {
  position: relative;
}

a:hover::before {
  opacity: 1;
}

<a href="#">
  <span>Текст</span>
</a>

БЛОГ НА HUSL

Как избавится от мерцания кнопки при hover?

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