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

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

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

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

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

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

Contents

1 hover時にふわっとさせる方法
2 簡単な解説
- 2.1 変化をもっと早くする
- 2.2 変化をもっと遅くする
3 まとめ

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;

この１行を指定するだけ！

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』の部分は『１秒かけて変化させる』という指定ですので、もちろんもっと変化のスピードを早くすることも遅くすることも出来ます。

変化をもっと早くする

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秒で変化*/
}