目次
実際に押したようなフィードバック演出をする
ボタンをクリックしたとき、「へこむ」ような動きを加えることで、視覚的なフィードバックを演出できます。
ユーザーにクリックが伝わったことを感覚的に示せる、非常に実用的なUI演出です。
HTML
|
1 2 3 |
<a href="#" class="press-btn">購入する</a> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 |
.press-btn { background: #ff5722; color: white; padding: 12px 24px; border: none; box-shadow: 0 4px #d84315; transition: transform 0.1s, box-shadow 0.1s; } |
応用：クリック時のへこみ演出
ボタンを押した瞬間に沈み込むような変化を加えることで「押した感」を表現します。
|
1 2 3 4 5 6 |
.press-btn:active { transform: translateY(2px); box-shadow: 0 2px #d84315; } |
備考
:activeはクリック中のみ適用されるため、短時間で戻ります。
transformとbox-shadowを組み合わせて自然な動きに仕上げるのがポイントです。
