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で文章を省略する方法。コピペでok

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

no image

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

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

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

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

最新記事

チャーさん

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

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

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