ホームページの作成・作り方

影を消す|CSSで作るボタンリンクリファレンス

影を消すにはnoneとhoverを使う

影をつけて浮いたように見えるボタンに、カーソルを乗せた時に影を消して沈んだように見せるためには、以下のようなコードを使うといいでしょう。

See the Pen QJbdvN by takayuki (@Hamuo) on CodePen.0


.btn_sample {
color:white;
background-color: #2196F3;
box-shadow: 0 7px 7px #aaa;
padding: 16px 32px;
margin: 10px;
display:inline-block;
}

.btn_sample:hover{
box-shadow: none;
}

簡単な解説

.btn_sampleのクラスでつけた影「box-shadow: 0 7px 7px #aaa;」を消すために、擬似クラス:hoverでbox-shadowを、noneに設定しています。

擬似クラス:hoverはカーソルが要素の上に来たときなので、スマホでは:activeのほうが押した感があっていいかもしれません。

変化する時間を設定するプロパティ「transition」を使っていないので、カーソルのオンオフでパカパカ動き、忙しなく見えてしまいます。

影を消しつつ、表示位置を下げて、沈んだ感を出す

See the Pen ボタン② by takayuki (@Hamuo) on CodePen.0


.btn_sample {
color:white;
background-color: #2196F3;
box-shadow: 0 7px 7px #aaa;
padding: 16px 32px;
margin: 10px;
display:inline-block;
transition:0.15s;
}

.btn_sample:hover{
box-shadow: none;
transform:translate(0px,7px);
transition:0.15s;
}

簡単な解説

transformを使うことで、ホバーしたときに表示位置を変更しています。
基本的には、box-shadowで指定した影の値と同じ分移動させると、しっかり落ちた感があっていいでしょう。

また、transitionを設定し、ホバーのオンオフ時に少し間を作っています。
先ほどの例よりも忙しなさがだいぶ軽減されたかと思います。

まとめ

  1. 影を消すなら、:hoverでbox-shadow:none;を設定
  2. transformで下方向に移動
  3. transitionで変化時間を変更

CSSでボタンはもっと面白く、リッチにできると思います。
ユーザーにわかりやすく、楽しい経験をしてもらえるようなデザインを心がけていきましょう。