【CSS(コピペ可)】hover マウスを重ねたときにCSSを変更する ボタンでの実例付

（最終更新月：2021年8月）

カーソルがボタンなどの要素上を通った際にCSSを変更する方法をお伝えします

当記事でのご紹介する方法は、JavaScriptは一切使わず、CSSのみで変更する方法を実例付きで解説します

:hover

を使っての方法となります

「そもそもCSSの書き方がわからない！」という方はこちらの記事からご覧ください

【CSS】CSSの基本 ～ CSSの記述方法　書き方の基本

HTML、CSS初学者の可向けに、CSSの基本「記述方法」を解説しています。実践を考えて記憶するべきところは最小限に。どこを押さえておけば良いのか？を中心に置いて解説しています

itc.tokyo

:hoverの書き方

:hoverの書き方はCSSの書き方がわかっていればとてもカンタンです

CSS記述の際に、

要素名 :hover { 適用したいCSS }

を記述します

:hoverの前に記述されている要素をカーソルが通った際に適用したいCSSが反映されます

「百聞は一見に如かず」

次章の実例をご覧ください

実例

影つきのボタンで、カーソルが上に来ると影がなくなり、ボタンを押したような見た目になります

【平常時（影付き）】

.link-btn{
　display:inline-block;
　border-radius:10%;
　font-size:16px;
　text-align:center;
　cursor:pointer;
　padding:6px 10px;
　background-color:#FBB305;
　line-height:1em;
　color:white;
　transition: 3s.;
　box-shadow:4px 4px 2px #cc9900;
　border:2px solid #F4F4F4;
}

【hover時（影無し）】

.link-btn:hover {
　　box-shadow:none;
　　color:white;
　　background-color:#FBD01D;
}

上記のコードをベースに色などを変更するとすぐにオリジナルのボタンが作成できます