CSS - плавный переход цвета градиента на зависание

Question

У меня есть следующая кнопка.

CSS-для кнопки это:

.cta-btn { 
 
    display: inline-block; 
 
    margin: 20px 0 0 20px; 
 
    color: #fff; 
 
    background-color: #FF8F1B; 
 
    background-image: linear-gradient(to right, #2ab3ff, #ff2d00); 
 
    box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85); 
 
    font-size: 21px; 
 
    border-radius: 30px; 
 
    padding: 12px 21px; 
 
    font-family: Montserrat; 
 
}

<a href="#" class="cta-btn">click me</a>

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

a.cta-btn:hover { 
    background-image: linear-gradient(to right,#FF2A67,#FF5D3A); 
    color: #fff; 
    box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85); 
    transition: background-image .3s linear; 
    transition: box-shadow .3s linear; 
} 

Любая помощь очень ценится.

Answer 1

Короткий ответ, вы не можете использовать только фон. Тем не менее, вы можете добиться аналогичного эффекта, используя другие элементы (или псевдоэлементы) внутри и затухая их при наведении.

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

ПРИМЕЧАНИЕ. Не все браузеры поддерживают переходы на псевдоэлементах, поэтому вам может потребоваться добавить пустые элементы, чтобы добиться такого же эффекта для старых/неподдерживаемых браузеров.

.cta-btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 20px 0 0 20px; 
 
    color: #fff; 
 
    box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85); 
 
    font-size: 21px; 
 
    border-radius: 30px; 
 
    overflow: hidden; 
 
    padding: 12px 21px; 
 
    font-family: Montserrat; 
 
    transition: box-shadow.3s ease-in-out; 
 
    text-decoration: none; 
 
} 
 

 
/* These are the two backgrounds, absolutely positioned to cover. */ 
 
.cta-btn::before, 
 
.cta-btn::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-image: linear-gradient(to right, #2ab3ff, #ff2d00); 
 
    border-radius: 30px; 
 
    z-index: -1; 
 
} 
 

 
.cta-btn::after { 
 
    opacity: 0; 
 
    background-image: linear-gradient(to right,#FF2A67,#FF5D3A); 
 
    transition: opacity.3s ease-in-out; 
 
} 
 

 
/* On hover, transtiion the shadow of the anchor, and fade in the after element to show the new background. */ 
 
.cta-btn:hover { 
 
    box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85); 
 
} 
 
.cta-btn:hover::after { 
 
    opacity: 1; 
 
}

<a href="#" class="cta-btn">click me</a>

Answer 2

Хотя все еще в состоянии увидеть background уменьшения и увеличения в размерах, отчасти это возможно с использованием нескольких background свойств на том же элементе, переключая background-size свойство.

.cta-btn { 
 
    color: #fff; 
 
    background: linear-gradient(to right, #2ab3ff, #ff2d00) 
 
    , linear-gradient(to right,#FF2A67,#FF5D3A); 
 
    background-size:100% 100%, 0% 0%; 
 
    background-origin: border-box, border-box; 
 
    box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85); 
 
    font-size: 21px; 
 
    border-radius: 30px; 
 
    padding: 12px 21px; 
 
    font-family: Montserrat; 
 
    transition: background .3s linear; 
 
} 
 
.cta-btn:hover { 
 
    background-size:0% 0%, 100% 100%; 
 
    box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85); 
 
}

<a href="#" class="cta-btn">click me</a>

Answer 3

@import url('https://fonts.googleapis.com/css?family=Montserrat:500'); 

html,body { 
    font-family: 'Montserrat', sans-serif; 
    margin:0; 
    padding:0; 
    background: linear-gradient(to right, #c9d6ff, #e2e2e2); 

} 

div { 
    height: 100vh; 
    display: flex; 
    align-items:center; 
    justify-content:center; 
} 

h1 { 
    font-size: 42px; 
    background-size:200%; 
    padding:15px; 
    border-radius:5px; 
    background-image: linear-gradient(to top left, #fe87c3  0%, #D38312 50%, #A83279 100%); 
    transition: .3s ease; 
    cursor: pointer; 
} 
h1:hover { 
    background-position: 90%; 
    color: #202020; 
} 

.home { 
    background-size: 200% 

}**strong text** 

Вот демо

https://codepen.io/Mikeytown19/pen/aLpNZa