扩大元素的点击区域

1. 问题背景

有时候我们在做移动端业务的开发时，会遇到这样的问题：我们按照UI设计稿画好了页面，但是在验收功能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不希望我们调整按钮的大小，破坏了他的设计。下面提供一种方法，既可以不改动UI，又可以调整点击的热区。

2. 方法

<button id="btn">btn</button>

#btn {
    position: relative;
}

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

原理其实很简单，伪元素相对于button进行四个方位的拉伸，这样不仅不会破坏布局，还达到了目的。

3. 效果