Button 的设计
Button 作为基本的 Web 元素,看似简单,却需要非常用心的设计,因为 Button 作为按钮,是具有多个不同的状态,每种状态都基本上需要进行一些特殊的优化设计,以让组件更生动美观。
注:所有的长度单位均采用 rem 而非 px,需要在 html 标签下设定 font-size 的 CSS 样式,一般我都是设置:font-size:12px,1440 x 900 的分辨率,如果分辨率更高的话,可以自己调整。当然你改写成 px 作为度量衡也是 OK 的。
Example:
Button的几种状态:
我们设计 Button 的样式,基本按照以下几个状态来设计:
- :focus - 当按钮获取焦点(可以是 JS 控制获取焦点,也可以是用 Tab 键一个一个切换从而获得焦点)
- :hover - 当鼠标处于悬停状态时
- :active - 当按钮处于点击状态时(按下但还没有放手的情况下)
- :active:hover - 当按钮处于点击,且鼠标依然悬停的情况下(比如你按下去,但是鼠标还不放手,然后把鼠标拖拽着挪开按钮,此时就会出现这个状态的反例)
- :active:focus - 当按钮处于点击且获取焦点的情况(这个情况的反例我也不知道反例应该怎么举)
- 正常状态,这我就不用解释了。
- .focus - 通过 class 设置的获取焦点状态
- .active - 通过 class 设置的点击状态
Button 的状态变化
我们先来梳理一下,Button 对应不同的动作,所产生的相应的变化。
正常状态
┣ A:鼠标悬停 -> S:hover -> A:鼠标按下 -> S:active:hover/:active:focus(*) -> A:鼠标移开 -> S:active/:active:focus(*) ->A:鼠标松开 -> S:focus
┗ A:Tab 选中 -> S:focus -> A:空格按下 -> S:active:focus -> A:Tab 移开焦点 -> S:active -> A:空格松开 -> S:focus
注: A = Action , S = Status
这边值得注意的是我打星号的位置: A:鼠标按下 -> S:active:hover/:active:focus(*) -> A:鼠标移开 -> S:active/:active:focus(*) ,这个位置有点特别,不同的浏览器有不同的实现效果:
-
- Chrome:在 CSS 文件中,active:hover 跟 active:focus 定义的顺序会影响到上面这个步骤的实现,定义在后的会优先显示给用户(距离用户越近),比如给按钮定义了如下的 CSS 效果:
-
1 .btn-default:active:focus { 2 color: #000; 3 background-color: #eeeeee; 4 border-color: #000000; 5 } 6 7 .btn-default:active:hover, 8 .btn-default.active:hover{ 9 color: #000; 10 background-color: #e6e6e6; 11 border-color: #000000; 12 }
那当我们按下鼠标的时候,看到的是 hover 的 CSS 效果,但是如果定义的顺序相反,鼠标按下以后,显示的是 active:focus 的 CSS 样式,如果是用空格键按下,也是这个规律,所以在 chrome 当中,鼠标按下(若键盘按下但是鼠标同时也悬停在上的话,情况也是一样),其实是有三个状态叠加而成,分别是 :active:hover+:active:focus+:active,当通过操作比如移除鼠标悬停再tab 键移除焦点(这些操作前提都是在鼠标按下或空格按下没松手的情况),那就会显示 active的样式,这一点弄明白了很重要。
- Safari:不存在上述优先顺序,空格键按下就是 active:focus,鼠标按下就是 active:hover,而且这两个状态是独立的,不会层叠覆盖,也就是说,在 safari 当中,只会有两个样式叠加,通过鼠标按下的就是 :active:hover+:active,通过键盘空格按下的,就是:active:focus+:active。
- 其他浏览器我暂时还么有测试。