html - 如何增加按钮的可点击区域？

Question

我需要将按钮的可点击高度增加到 48px。该按钮有背景颜色，我想增加可点击高度而不实际设置按钮的高度(即可点击区域的增加应该是不可见的/按钮周围的空白区域)。我已经尝试增加填充并设置 background-clip: content-box，但这意味着按钮的边缘不再是圆形的。实现这一目标的推荐方法是什么？

Answer 1

我会在这里使用一个伪元素:

button {
  --clickable-space-around-button: -15px;
  position: relative;
}

button::after {
  content: "";
  left: var(--clickable-space-around-button);
  right: var(--clickable-space-around-button);
  bottom: var(--clickable-space-around-button);
  top: var(--clickable-space-around-button);
  position: absolute;
}

<div style="padding: 20px;">
  <button onclick="console.log('clicked')">Click me</button>
</div>