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

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

タイトルとURLをコピーしました