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;
}