目次
平面的なボタンを奥行きのあるデザインに変える
立体感のあるボタンは、押せそうな印象を与えるため、UIにメリハリをつけたいときに活躍します。
box-shadowを活用することで影をつけ、見た目に奥行きを出すことができます。
HTML
|
1 2 3 |
<a href="#" class="shadow-btn">ボタンサンプル</a> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.shadow-btn { background-color: #4CAF50; color: white; padding: 10px 24px; border: none; cursor: pointer; box-shadow: 0 4px 0 #388E3C; transition: all 0.2s; } |
応用：ホバーで浮き上がるような演出
ホバー時に影を変えることでボタンが浮き上がったように見せることができます。
|
1 2 3 4 5 6 |
.shadow-btn:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.2); transform: translateY(-2px); } |
備考
box-shadowの色や距離で印象が大きく変わります。
transformとの組み合わせで動きを加えるとより自然になります。
