divタグにスタイルを当てていってCSSだけで、立体のボタンを作る方法をまとめています。
- 「CSS の box-shadow でボタンを立体にする方法」
- 「立体のボタンに :hover 疑似クラスでホバー時にアニメーションをつける」
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分指定しています。
ここまでで、立体的なボタンが完成したので、続いてホバー時にアニメーションをつけていきます。
立体のボタンに :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部分が押し込まれているように見えます。
これで完成です。
他の色も作成してみましたので、ぜひ参考にしてみてください。