百見は、一聞にしかず

見てもわからない事は、とりあえず聞いてみよう。

マウスホバー時に背景色をじんわり変える

オシャレなホームページを見てると、ボタンの上にマウスカーソルをあわせた時、ボタンの色が変わる事がよくあると思います。(と勝手に思い込んでいます)

今日はそんなhover時(マウスカーソルをあわせた時)に背景色をじんわりと変えるオシャレな感じ(?)のボタンを作りたいと思います。

 f:id:lbblue:20170601113454p:plain

 

■内容

イメージとしては、マウスカーソルが乗っていないときは灰色っぽい色にして、マウスカーソルが乗ったときに明るい青い色にしてみます。

 

■対応

 ①まず、ボタンを作ります。

<input type="submit" value="ボタン" name="my_submit" class="my_submit">

 

 ②CSSに色の設定をします。

.my_submit{
background-color: #aaa;
border: none;
color: #fff;
transition: all .4s;
}
.my_submit:hover{
background-color: #66f;
}

 

■動作確認

 マウスカーソルをボタンに持ってきた時にボタンの背景色が変わることを確認します。

<hover前>

f:id:lbblue:20170601113412p:plain

<hover後>

f:id:lbblue:20170601113428p:plain

 

うーん。スクリーンショットだと分かりづらいですね。。。

どうでしょう。うまく動きましたでしょうか。

ボタンの大きさを変えたり、色も変えたりすればきっとオシャレになると思います!

 

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書