目次
ボタンが押されたような動きとは
Webサイトのボタンに「押し込まれたようなアニメーション」を付けると、ユーザーが視覚的に反応を感じ取れるようになり、クリックしやすいUIになります。CSSだけで実装可能で、JavaScriptを使う必要はありません。
押し込み表現には複数のアプローチがありますが、本記事では初心者でも扱いやすい次の3パターンに絞って紹介します。
- ボタンが下方向に沈む動き
- ボタン全体が縮んで押されたように見える動き
- 内側にへこむような凹みエフェクト
それぞれ実装方法や使いどころも解説します。
方法1 transformを使ってボタンが沈む動きを作る
最も基本的な押下表現は、クリックした瞬間にボタンが少し下に動くように見せる方法です。
.button {
display: inline-block;
padding: 14px 28px;
background: #4087bf;
color: #fff;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 0 #2f5f8d;
}
.button:active {
transform: translateY(4px);
box-shadow: 0 1px 0 #2f5f8d;
}特徴
- 自然な押し込み感が出る
- 影が弱くなることで沈み込んだ印象を作れる
- 実装がシンプルで初心者でも扱いやすい
向いている場面
- CTAボタン
- サービス紹介のリンクボタン
- フラットデザインで統一したいとき
方法2 scaleでボタン全体が縮むような動きを作る
ボタンを押した瞬間に若干小さくすることで、弾力のあるアニメーションが作れます。
.button {
padding: 14px 28px;
background: #f6b7c1;
color: #fff;
font-weight: bold;
border-radius: 6px;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}
.button:active {
transform: scale(0.95);
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}特徴
- アニメ的な柔らかい押下表現
- scaleを使うので沈み込みよりも軽い動きになる
- 強調したいボタンに向いている
向いている場面
- キャンペーンボタン
- 可愛いデザインのサイト
- 動きを強めに出したいとき
方法3 insetの影でボタン内部がへこむエフェクトを作る
ボタン内部に影を作り、「押された部分が凹む」ように見せる表現です。
.button {
padding: 14px 28px;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease, transform 0.1s;
}
.button:active {
box-shadow: inset 0 4px 6px rgba(0,0,0,0.25);
transform: translateY(1px);
}特徴
- 内側にへこむリアルな押下表現
- グラデーションや立体ボタンと相性が良い
- 小さなボタンでも効果がわかりやすい
向いている場面
- 立体・フラットを使い分けたいデザイン
- キーボード風ボタン
- UIコンポーネントっぽい表現
使うときの注意点
押下アニメーションを設定する際は次の点を意識すると品質が上がります。
影の変化を必ずつける
ただ動くだけでは押された印象が弱くなるため、box-shadowの強弱を調整するのがポイントです。
transitionを設定する
動きが急すぎると違和感が出るため、0.1〜0.15秒程度が最適。
アクセシビリティも意識する
キーボード操作の場合でも押下感が伝わるように、focus時のスタイルも別途設定するのが望ましいです。
まとめ
CSSだけでボタンに押し込み表現を作る方法は多数ありますが、初心者がまず覚えるべきは次の3つです。
- 下方向へ沈むアニメーション
- ボタン全体が縮むアニメーション
- 内側へへこむ影を使ったアニメーション
これらを適切に使い分けることで、ユーザーにとって押しやすい、反応の分かりやすいボタン表現を実装できます。
追加でホバー時のアニメーションや、より高度なインタラクションも組み合わせれば、さらに効果的なUIが作れるでしょう。