ボタンを押せる範囲を広げてユーザーエクスペリエンスをあげる

2020年4月25日

ボタンの見た目は変えずに、ボタンを押せる領域を広げる場合には、background-clip を利用すると便利。

<button class="btn">
  button
 </button>

.btn{
  background: red;
  color: #fff;
  cursor: pointer;
  border: 10px solid transparent;
  background-clip: padding-box;
}

透明のborderを作り、background-clipを指定してborderの内側まで色をつける。

background-clip: padding-box; が無かった場合は、borderの領域分も背景色が広がってしまう。