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

CSS

(最終更新月:2021年8月)

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

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

:hover

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

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

: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ステップ
当ブログは、「プログラミング初心者が一からWebアプリを作り、ネットで公開するまで」を解説しているサイトです。

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

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

 

その他、各分野別に

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

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

 

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

404 NOT FOUND | ITCブログ
今の自分にチャレンジする
タイトルとURLをコピーしました