2/26実装テクCSS2024年2月26日マウスホバー時などに、ボタンの背景色をtransitionで滑らかに変更する実装はよく行うと思います。linear-gradientでグラデーションにした背景の場合、同様のやり方ではtransitionプロパティが効かないため、実装にはひと工夫必要です。linear-gradientでグラデーションにした背景色を、アニメーションで滑らかに切り替えるための実装方法を解説します。linear-gradient」にはtransitionが効かない例えば、マウスホバー時にボタンの背景色を滑らかに切り替えたい場合、単色の背景であれば以下のように記述すると思います。#083794;}しかし、背景がlinear-gradientで指定したグラデーションの場合、同様のやり方で以下のように記述してもtransitionは適用されません。#63d1c2);}上記CSSを使用して作成したボタンです。マウスホバーすると背景がパッと切り替わってしまい、transitionプロパティが効いていないことがわかります。CodePen.背景グラデーションをアニメーションで切り替えるには?まず、完成形のコードが以下になります。マウスホバーすると背景グラデーションが滑らかに切り替わります。CodePen.上記コードの仕組みは、以下のような考え方で作られています。「マウスホバー時の背景」は初期状態で透明にしておくマウスホバーされたら、「マウスホバー時の背景」をフェードインさせる上記の考え方を適用しているのが、CSSの以下の記述部分になります。1;}ボタンの擬似要素を活用することで、不必要にhtmlタグを増やさずに実装が可能です。-1は、マウスホバー時にボタンのテキストが背景色の裏に隠れないために必要な記述になります。補足:inputタグ形式のボタンの場合ここまで擬似要素を活用した実装方法を解説しましたが、タグによっては擬似要素を使えない場合があります。<input>タグ形式のボタンの場合、<input>タグには擬似要素が適用されないため、上述した実装方法はそのまま使用できません。<input>タグ形式のボタンの場合、完成形のコードは以下のようになります。CodePen.<input>タグなど、擬似要素を適用できないタグを使用する場合は、親要素のタグを用意する必要があります。/></div><input>タグ自身には背景色を設定せず、親要素側に背景色を指定します。あとは、親要素の擬似要素を活用した同様の方法で、背景グラデーションの滑らかな切り替えを実現できます。linear-gradientでグラデーションにした背景色を、アニメーションで滑らかに切り替えるための実装方法を解説しました。今回の内容のまとめです。linear-gradientにはtransitionが効かない2種類の背景色を重ね、opacityにtransitionを適用することでグラデーションの滑らかな切替えが可能inputタグの場合は擬似要素が使えないため、親要素で背景色の切替えを行う実装テクCSS内容が良かったらSNSでシェアしていただけると嬉しいです!ダークモードいわっちWebエンジニア福岡在住のフリーランスWebエンジニア。東京都内の自社開発企業でフロントエンドエンジニアとして約3年間勤めた後、フリーランスとして独立。当ブログでは「高品質なWebサイト制作」をテーマにした技術情報をメインに発信しています。Web制作案件のご相談も承っておりますので、お気軽にご相談ください。