どうもチャーさんです。
あなたは、cssでボタンにhoverして、
色を変える方法を探していますか？
この記事では、ボタンホバーで、
ボタンの色を変える方法について、
お話ししてます。
なので、この記事を読めば、
あなたはcssでボタンにhoverした時に、
ボタンの色を変えれるようになります。
ということで、ボタンhoverで色を、
変えたい場合は、このまま下にスクロールして、
読んでみてください。
スポンサードサーチ
cssでボタンにhoverしたら色変わる方法
ということで、結論からです。
cssでボタンにhoverした時に色を変えるには、
:hoverの中に、background:色;を指定しましょう。
例えば、
.button {
background:green;
}
.button:hover {
background:blue;
}
みたいなcssを書いておくと、
ボタンの色がもともと緑色なとこから、
ホバーした時に青色に変わる、
みたいなことができます。
スポンサードサーチ
ボタンの色をもっとふわっと変えたい場合
で、これでcssでボタンの色をホバーで、
変えることはできるのですが、
あまりにもパッと色が切り替わります。
ということで、色が切り替わるまでに、
時間差をつけることで、ふわっと色が
変わるみたいなこともできます。
で、それをするには、transitionを
使いましょう。
例えば、
.button:hover {
background:blue;
transition:1s;
}
みたいに書きましょう。
そうするとボタンの色が変わるまでに、
時間差がありふわっと色を切り替えることが、
できます。
でちなみにtransitionの後の、1sですが、
ここは時間を表します。
1s＝1second=1秒という意味になります。
なのでtransition:1s;とすれば、
１秒かけてhoverの内容を実行する。
ということになります。
ですが、ボタンの色をホバーで変えるのに、
１秒だとちと長いので、0.6sとか、0.4sとか
その辺りで試しましょう。
すると0.4秒で色がふわっと切り替わるので、
まぁいい感じになります。
ということで、cssでボタンの色を、
ホバーでふわっと変えるには、
transitionも使ってみましょう。
するとボタンの色を変えるのにも、
幅が広がります。
スポンサードサーチ
まとめ
ということでこの辺りで、
まとめに入ります。
cssでボタンにhover(ホバー)した時に、
色を変えたい場合は、
ボタンの要素に:hoverつけて、
backgroundで色を変えましょう。
例
.button:hover {
background:色;
}
さてということで、早速あなたの方でも
やってみましょう。
やるとあなたのcssスキルがアップしますよ。
で、
まずはボタンはもう用意しておると思うので、
ボタンの要素に(クラスつけてるならクラスに)
:hover{
background:色;}
と書きましょう。
で、その色のところに好きな色を書きましょう。
するとボタンの色が変わります。
で、そこに少しエフェクトを加えたいのであれば、
hover:{}のなかにtransitionを加えてみましょう。
すると時間差をつけることができますよ。
ということで、cssでボタンにhoverした時に、
色を変える方法の記事でした。
ボタンはweb制作で絶対使うので、
できるようになるとあなたにとって便利ですよ。
それでは、読んでもらってありがとうございました。
でわ。
チャーさん
