Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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の書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

最新記事

チャーさん

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

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

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