【4Large-Style】前端框架设计——Button 的设计思路

Button 的设计

---

 

Button 作为基本的 Web 元素，看似简单，却需要非常用心的设计，因为 Button 作为按钮，是具有多个不同的状态，每种状态都基本上需要进行一些特殊的优化设计，以让组件更生动美观。

注：所有的长度单位均采用 rem 而非 px，需要在 html 标签下设定 font-size 的 CSS 样式，一般我都是设置：font-size:12px，1440 x 900 的分辨率，如果分辨率更高的话，可以自己调整。当然你改写成 px 作为度量衡也是 OK 的。

　Example: 

Default Inverse Primary Success Info Warning Danger

　Button的几种状态：

　　我们设计 Button 的样式，基本按照以下几个状态来设计：

1. 　　:focus - 当按钮获取焦点（可以是 JS 控制获取焦点，也可以是用 Tab 键一个一个切换从而获得焦点）
2. 　　:hover - 当鼠标处于悬停状态时
3. 　　:active - 当按钮处于点击状态时（按下但还没有放手的情况下）
4. 　　:active:hover - 当按钮处于点击，且鼠标依然悬停的情况下（比如你按下去，但是鼠标还不放手，然后把鼠标拖拽着挪开按钮，此时就会出现这个状态的反例）
5. 　　:active:focus - 当按钮处于点击且获取焦点的情况（这个情况的反例我也不知道反例应该怎么举）
6. 　　正常状态，这我就不用解释了。
7. 　　.focus - 通过 class 设置的获取焦点状态
8. 　　.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。
  • 　　其他浏览器我暂时还么有测试。