css cssでボタンデザイン

cssでボタンにhoverした時に色を変える方法

投稿日:2019年11月2日 更新日:

Pocket

うもチャーさんです。

 

あなたは、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;とすれば、

1秒かけてhoverの内容を実行する。

 

ということになります。

 

 

ですが、ボタンの色をホバーで変えるのに、

1秒だとちと長いので、0.6sとか、0.4sとか

その辺りで試しましょう。

 

すると0.4秒で色がふわっと切り替わるので、

まぁいい感じになります。

 

 

ということで、cssでボタンの色を、

ホバーでふわっと変えるには、

transitionも使ってみましょう。

 

するとボタンの色を変えるのにも、

幅が広がります。

 

スポンサードサーチ

まとめ

 

ということでこの辺りで、

まとめに入ります。

 

cssでボタンにhover(ホバー)した時に、

色を変えたい場合は、

 

ボタンの要素に:hoverつけて、

backgroundで色を変えましょう。

 

 

.button:hover {

background:色;

}

 

さてということで、早速あなたの方でも

やってみましょう。

 

やるとあなたのcssスキルがアップしますよ。

 

 

で、

 

まずはボタンはもう用意しておると思うので、

ボタンの要素に(クラスつけてるならクラスに)

 

:hover{

background:色;}

と書きましょう。

 

 

で、その色のところに好きな色を書きましょう。

するとボタンの色が変わります。

 

で、そこに少しエフェクトを加えたいのであれば、

hover:{}のなかにtransitionを加えてみましょう。

 

すると時間差をつけることができますよ。

 

 

ということで、cssでボタンにhoverした時に、

色を変える方法の記事でした。

 

ボタンはweb制作で絶対使うので、

できるようになるとあなたにとって便利ですよ。

 

それでは、読んでもらってありがとうございました。

 

 

でわ。

 

チャーさん

-css, cssでボタンデザイン


スポンサードサーチ

関連記事

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。