如何增大按钮的触摸区域（hitbox）同时保持背景尺寸不变？

下面是几种实用的实现方案，按需选择：

方案一：用透明内边距扩展触摸区域 #

通过padding扩大按钮的整体尺寸（即触摸区域），再用background-clip限制背景只显示在原内容区域，视觉上背景大小不变，但点击范围变大。

.btn {
  /* 背景的实际尺寸 */
  width: 40px;
  height: 40px;
  /* 上下左右各加15px透明内边距，扩展触摸区域 */
  padding: 15px;
  /* 背景仅覆盖内容区，不包含padding */
  background-clip: content-box;
  background-image: url('你的按钮图片路径');
  background-size: cover;
  border: none;
  cursor: pointer;
}

方案二：利用伪元素创建独立点击区域 #

给按钮设置相对定位，用绝对定位的伪元素覆盖更大的范围来接收点击事件，按钮本身保持原背景尺寸。

.btn {
  position: relative;
  /* 背景的实际尺寸 */
  width: 40px;
  height: 40px;
  background-image: url('你的按钮图片路径');
  background-size: cover;
  border: none;
  /* 让按钮本身不处理点击，交给伪元素 */
  pointer-events: none;
}

.btn::before {
  content: '';
  position: absolute;
  /* 伪元素比按钮大30px（上下左右各延伸15px） */
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  /* 伪元素接收点击事件 */
  pointer-events: auto;
  cursor: pointer;
}

方案三：用容器包裹实现分离 #

用一个更大的容器作为触摸区域，把按钮放在容器中间保持原大小，容器负责接收点击，按钮负责显示背景。

<div class="btn-hitbox">
  <button class="btn"></button>
</div>

.btn-hitbox {
  /* 触摸区域的尺寸 */
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn {
  /* 背景的实际尺寸 */
  width: 40px;
  height: 40px;
  background-image: url('你的按钮图片路径');
  background-size: cover;
  border: none;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者luka lutidze