移动端上面的按钮如果很小,点起来很麻烦,体验将会很差,有的用户可能会有摔手机的冲动~

See the Pen GLRLEL by blwoosky (@blwoosky) on CodePen.1449

上面的 ❤ ,在手机上点击是比较考验耐心的~

所以,我们想要按钮好点的话,得适当的扩大它的触发范围,可以使用::before::after来实现:

.btn-trigger{
  position:relative;
  &::before{
    content:'';
    position:absolute;
    left:-10px;  //向左扩展10像素
    right:-10px; //向右扩展10像素
    top:-8px;    //向上扩展8像素
    bottom:-8px; //向下扩展8像素
    background:rgba(red,0.2);   //为了方便观察,加了半透明红色背景
  }
}

效果如下(实际项目中把伪元素的背景去掉即可):

See the Pen GLRVbg by blwoosky (@blwoosky) on CodePen.1449