Плавная смена фона кнопки с градиентного на прозрачный

#css #css3 #html5 #css_animation

У меня есть кнопка с линейно-градиентным фоном, оранжевой рамкой и текстом.

При наведении курсора на кнопку я хочу, чтобы фон стал прозрачным, не меняя другие
свойства кнопки. 
Я пытался перевести непрозрачность на ноль, но, очевидно, это скроет границу и текст.  

Я также попытался перенести background, но это не работает, потому что у меня нет
конечной точки для transition, так как фон должен быть прозрачным. 



body {
    background-color: darkblue;
}

.button {
    background-image: linear-gradient(red,yellow);
    border: solid orange 2px;
    border-radius: 10px;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
}




    

Ответы

Ответ 1

При использовании псевдоэлемента для фона, вы можете легко сделать это: 



body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  position: relative;
  overflow: hidden;
  z-index:0;
  background:transparent;
}

.button::before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(red, yellow);
  transition:1s;
}
.button:hover::before {
  opacity:0;
}





Вот еще одна идея без использования псевдоэлемента, где вы можете использовать изменение
background-color и background-size.    

Хитрость заключается в том, чтобы сохранить один из цветов градиента прозрачным,
чтобы мы могли видеть background-color (у вас может быть transition на прозрачный).    

Затем вы увеличиваете background-size, чтобы скрыть нижний цвет, и мы видим только
прозрачный. 



body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  background-image: linear-gradient(transparent, yellow);
  background-size:100% 100%;
  background-color:red;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition:1s;
}

.button:hover {
  background-color:transparent;
  background-size:100% 500%;
}





Или подумайте о корректировке размера фона, чтобы иметь другой вид transition:  



body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  background: 
    linear-gradient(red, yellow),
    transparent;
  background-size:100% 100%;
  background-position:left; /*change this to change the way the transtion happen*/
  background-repeat:no-repeat;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition:1s;
}

.button:hover {
  background-size:0% 100%;
}



Ответ 2

В данный момент это решение поддерживается только Хромом с включенными Experimental
Web Platform features (а именно):



CSS.registerProperty({
  name: '--alpha', 
  syntax: '', 
  initialValue: 1, 
  inherits: true,
})
body {
  background-color: darkblue;
}

.button {
  --alpha: 1;
  background: linear-gradient(rgba(255,0,0,var(--alpha)), rgba(255,255,0,var(--alpha)))
transparent;
  border: solid orange 2px;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition: --alpha 1s linear;
}

.button:hover {
  --alpha: 0;
}