ホームへ

【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の値は下記のように指定します。

box-shadow: 右方向 下方向 ぼかし具合 広がり 色

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

影ありボタンデザイン例

box-shadow: 0 0px 10px 0 rgba(0,0,0,0.5)

ボタン

box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3)

ボタン

box-shadow: 5px 5px 0 0 #2f5d08

ボタン

box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5)

ボタン

box-shadow: 5px 5px 0 0 rgba(0,0,0,0.3)

ボタン

box-shadow: 0 5px 0 0 #2f5d08

ボタン

【方法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-shadowborder
表現の幅複雑単純
位置外側内側
角丸×

表現の幅・難易度の違い

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

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

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

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

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

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

位置の違い

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

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

box-shadow border

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

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

角丸をつけたときの違い

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

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

box-shadow border

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

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

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

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

マンガで読める関連記事