CSS の box-shadow でボタンを立体にする方法

準備するHTMLは下記です。

<div class="sample-button">Button</div>

このHTMLにスタイルを当てていきます。

当てるCSSは下記です。

        .sample-button {
          background-color: #00A5E3; /* 背景色の指定 */
          box-shadow: 0 4px #006d97; /* 立体的に見せるために縦軸に影を指定 */
          color: #fff; /* 文字色の指定 */
          cursor: pointer; /* カーソルの指定 */
          font-size: 24px; /* 文字サイズの指定 */
          height: 64px; /* 高さの指定 */
          line-height: 64px; /* 行の高さを指定 height と合わせて文字を中央にしています */
          text-align: center; /* 文字の中央寄せ */
          -webkit-transition: all .3s; /* 遷移時間の指定（ベンダープレフィックス） */
          transition: all .3s; /* 遷移時間の指定 */
          width: 300px; /* 横幅の指定 */
    }

作成したHTMLにCSSを当てると下記のようになります。

box-shadowを指定してあげるだけで、立体的に見えてきますよね。

ポイントは、背景色から2トーンくらい落とした色をbox-shadowとして設定してあげることです。

box-shadowの値は「横軸」「縦軸」「色」の順で指定ができるので今回は縦に4px分指定しています。

ここまでで、立体的なボタンが完成したので、続いてホバー時にアニメーションをつけていきます。

参考：MDN「box-shadow」

参考：MDN「:hover」

立体のボタンに :hover 疑似クラスでホバー時にアニメーションをつける

見た目が完成したので、次にホバーをさせた時に押し込めるようにしていきます。

<div class="sample-button">Button</div>

当てるCSSは下記です。

        .sample-button:hover {
          background-color: #006d97; /* 背景色の指定 */
          box-shadow: none ; /* 影の指定を外す設定 */
          -webkit-transform translateY(4px); /* 縦軸にアニメーション（ベンダープレフィックス） */
          transform: translateY(4px); /* 縦軸にアニメーション */
    }

作成したHTMLにCSSを当てると下記のようになります。

box-shadowを解除してあげて、縦方向に4px移動させてあげます。そうするとbox-shadow部分が押し込まれているように見えます。

これで完成です。

他の色も作成してみましたので、ぜひ参考にしてみてください。

参考：MDN「box-shadow」

参考：MDN「:hover」