【CSS/html】ボタンに影をつける方法

「ボタンに影を付けてかっこよく目立たせたい！」

ボタンに影をつける方法を紹介します。

【方法1】box-shadowを使う

box-shadowは要素に影をつけるCSSです。

ボタン

<style>
.example{
    /*コレ*/box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
    display: block;
    padding: 10px;
    width: 200px;
    text-align: center;
    background: #5c9b26;
    color: #FFF;
    text-decoration: none;
    margin: 10px;
}
</style>
<a href="#" class="example">ボタン</a>

box-shadowの値は下記のように指定します。

1. 右方向：左から光が当たっていることを表現できます。マイナスにすると逆になります。
2. 下方向：上から光が当たっていることを表現できます。マイナスにすると逆になります。
3. ぼかし具合：色をぼかすことができます。0にするとぼけません。省略すると0になります。
4. 広がり：中心から広げることができます。0にすると広がりません。省略すると0になります。
5. 色：影の色を指定します。rgbaを使うことで半透明な色も指定できます。

影ありボタンデザイン例

【方法2】borderを使う

borderは本来要素に枠線をつけるCSです。

これを使ってカンタンな影を表現できます。

ボタン

<style>
.example2{
    /*コレ*/border-bottom: 5px solid rgba(0,0,0,0.5);
    display: block;
    padding: 10px;
    width: 200px;
    text-align: center;
    background: #5c9b26;
    color: #FFF;
    text-decoration: none;
    margin: 10px;
}
</style>
<a href="#" class="example2">ボタン</a>

borderについて詳しくはこちら↓

box-shadowとborderの違い

	box-shadow	border
表現の幅	複雑	単純
位置	外側	内側
角丸	○	×

表現の幅・難易度の違い

ここまでの例を見てわかる通りbox-shadowはぼかしたり広げたりすることができます。

borderはぼかしたり広げたりできません。

※厳密には工夫次第でできますが、かえってメンドウです。

また、box-shadowはborderと同時に指定できますが、borderはできません。

※厳密にはborderのかわりにoutlineを使うと同時使用ができます。

一方でbox-shadowは使い慣れないため指定を間違いやすいですが、borderは使い慣れているため間違わず使えますね。

位置の違い

box-shadowは要素の外側に、borderは要素の内側につきます。

下記は影の色を半透明の灰色にして背景色が反映されるようにしています。

box-shadowは外側の色に影響され、borderは内側の色に影響されていることがわかります。

widthやheightを指定するときも注意しましょう。

角丸をつけたときの違い

下記例の影とボタンの境界線に注目してください。

box-shadowは角丸(border-radius)にしても丸いですが、borderは角丸にならなくなります。

【まとめ】ボタンに影をつける方法

四角く線のないボタンの下部に単色の影を付けるとき
→border-bottomがオススメ

それ以外
→box-shadowがオススメ

以上、ボタンに影をつける方法でした。