前提・実現したいこと
グラデーションの背景のついたボタンで、ホバー時にグラデーションの色が変化するようにしたいです。
発生している問題・エラーメッセージ
transitionを使って徐々に変化するようにしたいのですが、transitionが効きません。
該当のソースコード
html
1 <button class="top-button"> 2 <a href="">Read More</a> 3 </button>
css
1button.top-button a{ 2 display:inline-block; 3 width:185px; 4 height:48px; 5 background: -moz-linear-gradient(top left, #C4FFED, #F5BAD3); 6 background: -webkit-linear-gradient(top left, #C4FFED, #F5BAD3); 7 background: linear-gradient(to bottom right, #C4FFED, #F5BAD3); 8 transition: all 1s ease; 9} 10button.top-button a:hover{ 11 background: -moz-linear-gradient(top left, #F8FFd0, #C4FFED); 12 background: -webkit-linear-gradient(top left, #F8FFd0, #C4FFED); 13 background: linear-gradient(to bottom right, #F8FFd0, #C4FFED); 14} 15.top-button a{ 16 font-family : '源の角ゴ',sans-serif; 17 font-weight : bold; 18 font-size : 13px; 19 line-height : 48px; 20 letter-spacing : 0.26px; 21 color : #7A6A56; 22}
試したこと
transitionを:hoverの方につけてみましたが、だめでした。
補足情報(FW/ツールのバージョンなど)
ちなみにこのボタンはページ内にいくつかあるんですが、そのなかにはposition:absolute;で位置指定しているものもあります。ひょっとしたらpositionで位置指定するとtransitionが効かないみたいなことはないですか。
なぜtransitionが効かないかわかる方いらっしゃったら教えてください。よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/17 06:32