CSSテンプレート：シャドウ付きボタンで立体感を出す
📝 使用用途
このテンプレートは、ボタンに視覚的な奥行きを加えることで、ユーザーの注目を集めたい場面で使えます。クリック可能な要素を目立たせたい時に有効です。
📘 解説
box-shadow プロパティを使ってボタンに影をつけ、立体感を演出します。:hover 時に影を強調することでインタラクションを視覚化しています。
🔹 部分コード
<button class="shadow-button">押してみて</button>
<style>
.shadow-button {
background-color: #f04e30;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.shadow-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
</style>
🔸 HTML全体コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シャドウ付きボタン</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.shadow-button {
background-color: #f04e30;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.shadow-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<button class="shadow-button">押してみて</button>
</body>
</html>
🎨 シャドウボタンのデザイン応用テクニック
box-shadowを使ったボタンデザインは、UIの視覚的な階層を作り出す強力なツールです。適切に使用することで、ユーザーの視線を自然に重要な操作要素へと導くことができます。
🌈 カラーバリエーションの活用
基本の赤色（#f04e30）だけでなく、サイトのカラースキームに合わせて調整可能です。例えば、青色のボタンにはbackground-color: #4285f4、緑色には#34a853など、用途に応じて色を変更できます。影の色もrgba(0, 0, 0, 0.3)からrgba(66, 133, 244, 0.3)のように、ベースカラーに合わせた調整が可能です。
🖌️ 影の微調整で印象を変える
影の設定を少し変えるだけで、ボタンの印象が大きく変わります。box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)にするとより繊細な印象に、0 8px 15px rgba(0, 0, 0, 0.3)にするとより浮き上がったような強い立体感を表現できます。また、insetキーワードを使うと内側に影をつけることができ、押し込まれたような効果を作れます。
⚡ インタラクションの強化
ホバー時の変化をよりドラマチックにするには、transform: scale(1.05)を追加すると良いでしょう。さらにtransitionプロパティにtransform 0.2s easeを追加することで、拡大アニメーションも滑らかになります。アクティブ時（クリック時）には:active擬似クラスを使ってbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)に変更すると、実際に押されたようなフィードバックをユーザーに与えられます。
これらのテクニックを組み合わせることで、単なる装飾以上の機能性を持ったボタンを作成できます。ただし、過度なアニメーションや効果はかえってユーザビリティを損なう可能性があるため、常にユーザー体験を考慮したデザインを心がけましょう。