- 尝试体验一下费资定律
扩大点击范围的益处：提高易用性（随着触控屏幕愈来愈普及，这一点会变得更加重要，没有人想点击那个讨厌的小按钮很多次）
本小节的练习：扩大点击按钮的点击范围
效果图：
扩大了点击范围的按钮
解释一下：
我们希望右边的按钮像左边的按钮一样有较大的点击范围（加上白色区域），但又不希望有白色区域来影响我们的布局和控件大小
----总之而言，最终效果=右边的大小+左边的点击范围
小测试
html
<button class="button"></button>
第一步
随意创建按钮，不一定要像以下例子一样
css
padding: 2em;
background:#58a url("cross.svg") no-repeat center;
background-size: 40%;
border-radius: 50%;
border: .1em solid rgba(0,0,0,.3) inset;
效果：
普通的按钮
第二步：
我们给按钮添加一个伪元素（扩充点击范围）
并运用上一小节的cursor改变一下游标样式
.button{
padding: 2em;
background:#58a url("cross.svg") no-repeat center;
background-size: 40%;
border-radius: 50%;
border: .1em solid rgba(0,0,0,.3) inset;
position: relative;
cursor: pointer;
}
.button::before{
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
content: '';
}
并不能截图到游标，所以就不扔图了，大家测试一下吧
（可以给我推荐几款截图软件么？，目前感觉最好用的还是QQ截图，真是尴尬）
简单两步，就能大大提高按钮的点击范围。
这些细节往往能给用户更好的体验！
