не работает transition при использовании css gradient generator(отдельный сайт) на background

Question

Пытаюсь создать кнопку, у которой есть плавный переходный цвет. Но почему-то, при использовании css gradient generator чтобы сделать задний фон, transition перестаёт работать.

body {
  font-family: Arial;
  background-color: orange;
  color: black;
}
.butt {
  background: rgb(51,57,57);
  background: linear-gradient(0deg, rgba(51,57,57,1) 0%, rgba(247,244,244,1) 100%);
  color: black;
  margin: 2px;
  text-decoration:none;
  transition: all 4s ease;
}
.butt:hover {
  background: rgb(247,244,244);
  background: linear-gradient(0deg, rgba(247,244,244,1) 0%, rgba(51,57,57,1) 100%);
  color: black;
  margin: 2px;
  text-decoration:none;
  transition: all 4s ease;
}

<a href="#" class="butt">Кнопка</a>

А при использовании простого фона, Transition срабатывает, мне нужно решить эту проблему не лишившись двухцветности. Я уже пол интернета перерыл, но моей темы нигде нету.

Answer 1

Так получилось, что transition не применяется к градиентам, разве что в чудо браузере IE. Решить можно разными методами. Вот парочка вариантов:

Сделать фон в 2 раза выше (или шире, по ситуации) и изменять background-position

body {
  font-family: Arial;
  color: black;
}

.butt {
  display: inline-block;
  background: linear-gradient(rgba(51, 57, 57, 1) 0, rgba(247, 244, 244, 1) 50%, rgba(51, 57, 57, 1) 100%) no-repeat 0 0/auto 200%;
  color: black;
  padding: 10px;
  text-decoration: none;
  transition: all .2s ease;
}

.butt:hover {
  background-position: 0 100%;
}

<a href="#" class="butt">Кнопка</a>

Сделать два градиентных слоя и менять прозрачность одному из них

body {
  font-family: Arial;
  color: black;
}

.butt {
  display: inline-block;
  background: linear-gradient(rgba(51, 57, 57, 1) 0, rgba(247, 244, 244, 1));
  color: black;
  padding: 10px;
  text-decoration: none;
  position: relative;
  transition: all .4s ease;
}
.butt:before{
  content: '';
  display: block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: linear-gradient(to right, red,orange);
  opacity:0;
  transition: inherit;
}

.butt span{
  position: relative;
  z-index: 1;
}
.butt:hover:before {
  opacity: 1;
}

<a href="#" class="butt"><span>Кнопка</span></a>

Сверстать граиент в svg и поставить как фоновую картинку. Смена такого background-image будет анимироваться через transition

Answer 2

body {
  font-family: Arial;
  background-color: orange;
  color: black;
}

.butt {
  padding: 20px;
  background: linear-gradient(0deg, rgba(51, 57, 57, 1), rgba(247, 244, 244, 1));
  color: black;
  margin: 2px;
  text-decoration: none;
  transition: background 4s ease;
}

.butt:hover {
  background: linear-gradient(180deg, rgba(51, 57, 57, 1), rgba(247, 244, 244, 1));
  color: black;
  margin: 2px;
  text-decoration: none;
}

.element {
  color: black;
  margin: 2px;
  display: inline-block;
  position: relative;
  padding: 20px;
  background: linear-gradient(0deg, rgba(51, 57, 57, 1), rgba(247, 244, 244, 1));
  z-index: 2;
}

.element span {
  position: relative;
  z-index: 3;
}

.element::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(51, 57, 57, 1), rgba(247, 244, 244, 1));
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s linear;
}

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

<a href="#" class="butt">Кнопка</a>

<a href="" class="element"><span>Кнопка 2</span></a>

Answer 3

Вариант с псевдоэлементами и background-image

body {
  background-color: #d3d3d3;
}

.button {
  border: solid white 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(#111, silver);
  transition:1s;
}
.button:hover::before {
  opacity:20%;
}

<button class="button">Кнопка</button>

БЛОГ НА HUSL

не работает transition при использовании css gradient generator(отдельный сайт) на background

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