【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;
}

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

おススメ記事！興味ある方はこちらもどうぞ！

【超簡単】RaspberryPIでUbuntu搭載のPCを作る

【DigitalOcean】Dropletsを作成する5ステップ

日報アプリを一から開発し、ウェブに公開するまではこちらにまとめています

また、公開したウェブアプリはこちら（https://nippo.itc-app.site）でご覧いただけます（公開後もアップデート中）

その他、各分野別に

1. Pythonについて
2. HTML・CSSについて
3. Djangoフレームワークについて
4. Webサーバーについて
5. 実際に公開をする方法

を記載したページも用意しています

ご自身の目的に合わせて、お好きな箇所からご覧ください

404 NOT FOUND | ITCブログ

今の自分にチャレンジする

itc.tokyo