ボタンのデザインを変えずに、クリック領域だけ広げるTips

「CSS シークレット」で書かれていた備忘録で、言葉では伝えるのが難しいですが、 開発していると、ボタンそのものの width と height では領域が狭くて、ユーザーさんはクリックしにくい、 ただそのボタンのデザインは変更せずに、クリックできる領域だけを広げたいという時があります。そんな時の実装方法です。

実装方法

擬似要素を使って下記のように実装します。

.target {
  position: relative;
}
.target:before {
  content: "";
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
}

上記の場合、ボタンの周りに 15px クリック領域が出来ます。

他のやり方も

擬似要素を既に使っている時は、ボーダーを使ったやり方もあります。

.target {
  border: 15px solid transparent;
}

この場合、ボタン領域に 15px の透明なボーダーが出来て領域が広がります。

もしこれでボタンの背景が広がってしまう場合は、background-clip: padding-box;を指定することで回避することもできます。

.target {
  border: 15px solid transparent;
  background-clip: padding-box;
}