【初心者向け】マウスオーバーしたときに色をふわっと変更する方法【CSS】

 

こんにちは、kei（@KeiKei0815blog）です！

 

マウスオーバーした時に文字色をふわっと切り替える方法をやってみました。

 

↓こんな感じです。
リンクテキスト

 

今回は、CSS3の” transition”を使って、テキストをふわっと切り替えてみます。

 

[toc]

 

マウスオーバーで背景色をふわっと切り替える【CSS】

 

HTMLは以下の通りaタグにclass指定をします。

 

 html
<a class="hoge" href="#">リンクテキスト</a>

 

続いてcssコードの記述です。

 

 css
/*色の切り替え速度*/
a.hoge {
background-color: #333;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*ホバー時の色*/
a.hoge:hover {
background-color: #b1eeff;
}

 

『transition（遷移）』プロペティを指定してあげることで、変化前後の状態変化を定義することができます。

 

transition: all 0.3s easeの”0.3”の部分は速度の指定。「1s=1秒」なので、上記の場合ですと0.3秒で背景色が切り替わります。

 

『ease』は開始と終了が滑らかに変化してくれる速度指定です。このeaseのおかげで、オンマウス時にふわっと切り替えをしてくれます。

 

あとは、「background-color: 」に色の指定をしてあげれば、ホバー（hover）後の色が変わる感じです。

 

CSSマウスオーバー時に背景色をふわっと切り替える：まとめ

 

今回は、cssでオンマウス時にボタンの色がふわっと切り替わる方法について紹介しました。

 

本記事が参考になりましたら幸いです。

 

ここまで読んでいただき、ありがとうございました。