CSSのbox-shadow部分は押せない
HTMLとCSSでボタンを作成する際に、Webサイトによってはボタンの以下のようなbox-shadowでボタンの下に線を付けていることがあります。
CSS
/* <button class="orange-ng-btn">ボタン</button> */
.orange-ng-btn {
background: orange;
color: white;
border: none;
padding: 15px 60px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 10px 0 darkorange;
}
.orange-ng-btn:hover {
background: orange;
filter: brightness(1.2);
}しかし、このボタンのデザインだと線部分を押せないので問題があります。
試しにbox-shadowで付けたボタンの線部分にカーソルを乗せて、マウスオーバーしてみてください。
ボタンが反応していないことが確認できます。
box-shadowでボタンの線はinsetで付ける
この問題はボタンの線をbox-shadowのinsetで付けることで解消します。
box-shadowをinsetで付ける際は-10pxのように負数になるのと、ボタンにpaddingで余白を追加して高さの調整が必要です。
CSS
/* <button class="orange-btn">ボタン</button> */
.orange-btn {
background: orange;
color: white;
border: none;
padding: 15px 60px 25px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
box-shadow: inset 0 -10px 0 darkorange;
}
.orange-btn:hover {
background: orange;
filter: brightness(1.2);
}ちょっとした違いですが、insetでボタンに線を付けていないことが原因でボタンが押しにくくなっているWebサイトをたまに見かけるので、注意が必要です。
