CSS - ホバー上のスムーズなボタングラデーションの色の変化

Question

私は次のボタンがあります。

.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>

私は私がそれにカーソルを合わせると、ボタンがスムーズグラデーションの色を変更したい：

上記のボタンのCSSはこれです。マウスを動かすと、グラデーションの色がボタンにスナップするだけではいけません。これは、スムーズなグラデーションの色の移行の私の試みです：

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

短い答え、あなただけの背景を使用することはできません。ただし、ホバー上で他の要素（または擬似要素）を使用してそれらをフェードインしても同様の効果を得ることができます。

次の例では、2つのバックグラウンドステートとして2つの擬似要素を使用しています。ホバーでは、グラデーションが遷移可能な場合に起こる同様のトランジション効果を与える新しいバックグラウンドを単純にフェードインします。

注：すべてのブラウザが擬似要素でのトランジションをサポートしているわけではないため、古い/サポートされていないブラウザでも同じ効果を得るために空の要素を追加する必要があります。

.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-sizeプロパティを切り替える、同じ要素に複数backgroundプロパティを使用して部分的に可能です。ここで

.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