CSS 扩大可点击区域的 2 种方法

一、使用 border/padding 属性扩大可点击区域

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

.btn {
    border: 20px solid transparent;
    background-clip: padding-box;
}

或者
.btn {
   padding: 20px;
}

二、使用伪元素扩大可点击区域

.btn {
    position: relative;
}

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