今天莫名的累，借此机会水一篇好了

合适的鼠标光标

为了给用户带来良好的体验，鼠标在网页中有着不可忽视的作用。不同的鼠标光标暗示着不同的信息。下图是CSS3中新的一批内建光标：

下面就简单实现几个：

<!--禁用状态-->
<button>可用</button>
<button disabled>禁用</button>
<!--隐藏光标 适用于公共触摸屏-->
<button class="dis-cursor">隐藏光标</button>

CSS：

:disabled{        /*disable选择器*/
    cursor: not-allowed;
}
.dis-cursor{
    cursor: none;
}

效果如下：

扩大可点击区域

美国心理学家 Paul Fitts 层提出Fitts法则：人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数。
即：

其中，T表示所需时间，D是从起点到目标中心的距离，W是目标区域的宽度，a和b是常数。
对于网页中那些较小的、难以瞄准的控件来说，如果不能把视觉尺寸放大时，可以把可点击区域放大以增加用户体验和提升交互性。

利用透明边框

首先想到的就是透明边框，因为鼠标也会对边框出发鼠标事件。
但是要注意，利用background-clip把背景色限制在原本的区域。
如果想要给元素添加边框，可以利用内嵌投影来模拟边框。
HTML:

<div class="extend-a">+</div>

CSS：

.extend-a{
    margin: 5px auto;
    width: 2em;
    height: 2em;
    font: 250%/2em sans-serif;
    text-align: center;
    border-radius: 50%;
    background: #58a;
    color: white;
    cursor: pointer;
    border: 10px solid transparent; /*透明边框扩大可点击区域*/
    background-clip: padding-box;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;  /*内嵌投影模拟边框*/
}

利用伪元素

利用边框心里面总感觉怪怪的，有点别扭。这时候可以试试伪元素了，毕竟边框有时候会影响整体的布局，而伪元素不会。
可以在按钮的上层覆盖一层透明的伪元素，并且让伪元素在四个方向都比宿主元素大10px
HTML:

<div class="extend-b">+</div>

CSS：

.extend-b{
    position: relative;
    margin: 5px auto;
    width: 2em;
    height: 2em;
    font: 250%/2em sans-serif;
    text-align: center;
    border-radius: 50%;
    background: #58a;
    color: white;
    cursor: pointer;
}
.extend-b::before{
    content: "";
    position: absolute;
    top:-10px; right:-10px; bottom:-10px; left:-10px;
}

就偷偷的划一次水