WEBデザイン

【CSS】hover時の効果をふわっとさせる簡単な方法

ボタンのオンマウス(ホバー)時の効果は、UXに置いてもリンクボタンだということが感覚で分かる為、webデザイン的にも有効です。

hover効果の方法や基本的な動きについて知りたい方は、こちらの記事でサンプルを踏まえ説明しています。

【CSS】hoverでオンマウス時にボタンに効果をつける方法hover(ホバー)はリンクボタンなど、オンマウス時に要素を変化させることが可能な効果です。 ちなみにオンマウス状態とはカーソルが...

ボタンホバー時の効果について以前の記事では、切り替え時がはっきりしていました。

今回はその切り替えを『ふわっと』させる方法をご紹介します。

hover時にふわっとさせる方法

ふわっとさせたい要素の用意

では、早速『ふわっと』させる方法をご紹介します。

サンプルとして以下のようなシンプルなボタンを使用して説明していきます。

See the Pen
BapYoRy
by FLD (@freeladay)
on CodePen.

上記ボタンのHTMLとCSSのコードは以下

HTML
<div class="button">BUTTON</div>
CSS
.button{
  width:300px;
  border:solid 1px #000;
  coler:#000;
  padding:10px 0;
  font-weight:bold;
  text-align:center;
}

hover時の指定

上記サンプルボタンにホバー時の効果を指定します。

See the Pen
qBRxOjy
by FLD (@freeladay)
on CodePen.

CSS
/*ホバー時の指定*/
.button:hover{
 background:#000;
 box-shadow:0px 0px 10px #666;
 color:#fff;
}

以下のボタンにマウスを持ってくると、”背景色の変化・文字色の変化・影が付く”という効果がつきましたが、

この時点ではパキッとはっきりした切り替えになっています。

ふわっとさせる指定

上記のコードにふわっとさせる為のコードを追加します。

CSS
transition : 1s;

この1行を指定するだけ!

See the Pen
RwKQWZm
by FLD (@freeladay)
on CodePen.

マウスを乗せるとふわっとした変化になりました。

具体的なコードは、以下になります。

CSS
/*ホバー時の指定*/
.button:hover{
 background:#000;
 box-shadow:0px 0px 10px #666;
 color:#fff;
 transition : 1s; /*ふわっとさせる指定*/
}

 

しかし、このままだとマウスがボタン上からはなれた時の切り替えがはっきりしたままになってしまいます。

そこで、今回はマウスが離れた(マウスアウト)時も『ふわっと』させる指定をしていきます。

マウスアウト時の指定

マウスアウト時の指定は、ホバー前のcssに指定します。

See the Pen
jOyZbYV
by FLD (@freeladay)
on CodePen.

マウスがボタン上に来た時、はなれた時のそれぞれにふわっとした指定が出来ました!

CSS
.button{
 width:300px;
 border:solid 1px #000;
 coler:#000; padding:10px 0;
 font-weight:bold;
 transition : 1s; /*ふわっとさせる指定*/
}

.button:hover{
 background:#000;
 box-shadow:0px 0px 10px #666;
 color:#fff;
 transition : 1s; /*ふわっとさせる指定*/
}

簡単な解説

transition : 1s;

この『1s』の部分は『1秒かけて変化させる』という指定ですので、もちろんもっと変化のスピードを早くすることも遅くすることも出来ます。

変化をもっと早くする

See the Pen
XWpZmqE
by FLD (@freeladay)
on CodePen.

CSS
.button{
 width:300px;
 border:solid 1px #000;
 coler:#000; padding:10px 0;
 font-weight:bold;
 transition : .5s; /*0.5秒で変化*/
}

.button:hover{
 background:#000;
 box-shadow:0px 0px 10px #666;
 color:#fff;
 transition : .5s; /*0.5秒で変化*/
}

変化をもっと遅くする

See the Pen
ZELrbRa
by FLD (@freeladay)
on CodePen.

CSS
.button{
 width:300px;
 border:solid 1px #000;
 coler:#000; padding:10px 0;
 font-weight:bold;
 transition : 3s; /*3秒で変化*/
}

.button:hover{
 background:#000;
 box-shadow:0px 0px 10px #666;
 color:#fff;
 transition : 3s; /*3秒で変化*/
}

まとめ

ホバー時の指定を滑らかにすることで柔らかな印象を与えることが出来ます。

ボタン効果の指定時に今回のようなひと技を加えることによって全体の雰囲気も変わってくるので、ぜひ使ってみてくださいね!

ABOUT ME
FreeLaDay管理人
FreeLaDay管理人
現役フリーランスによる情報サイト。 webデザインに関する知識などを主に、コラムやライティング術など、在宅ワークが充実するような楽しい記事も掲載中です。