【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。
  • 　　其余浏览器我暂时还么有测试。

 

Button　基础样式

---

　　咱们首先要来设计一个基础的 Button 样式，咱们能够这样子来作：

 1 .btn {
 2     display: inline-block; /*容许横排布局且支持设置宽高*/
 3     padding: 0.5rem 1rem; /*设置内边距，避免文字直接贴在边框上*/
 4     margin-bottom: 0; /*默认按钮是紧贴外部容器的底部*/
 5     font-size: 1.2rem; /*文字大小*/
 6     font-weight: normal; /*正常字体*/
 7     line-height: 1.42857143; /*设置行高*/
 8     text-align: center; /*文字居中*/
 9     white-space: nowrap; /*强制文本在一行显示，不容许换行*/
10     vertical-align: middle; /*垂直居中*/
11     cursor: pointer; /*设置鼠标悬停时的光标样式*/
12     background-image: none; /*不设置背景图*/
13     border: 0.1rem solid transparent; /*设置边框样式，但不设置颜色，颜色交由后续其余类来配合设置*/
14     border-radius: 0.5rem; /*圆角*/
15 } 

　　作了这些设置之后呢，咱们的默认样式按钮就是这样子了： 

　　而后咱们再对 focus、hover 作一些设置：　

1 /*鼠标悬停*/
2 .btn:hover,
3 .btn.focus{
4     text-decoration: none;
5     -webkit-box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*下阴影（兼容）*/
6     box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*下阴影*/
7 }

　　这样的效果是，当鼠标悬停增长一个下阴影，让按钮感受是浮起来，等待你按下意思，原本我是不打算把.focus 放入的，但愿跟:focus 保持一致，可是后来想想，若是咱们都主动的设置了 focus 这个类的话，确定是但愿它凸显的，而不加入：focus 是由于，当两个按钮并排的时候，点选一个按钮结束后会进入 :focus状态，此时按钮凸起，可是我若是想点击另外一个按钮，鼠标移动到第二个按钮，第二个按钮也会凸起，这时候就有两个按钮同时凸起，而后当按下第二个按钮时因为第一个按钮会回到正常状态，正常状态下是不会有凸起而是平滑的，那两个按钮同时变化就会有两个按钮同时被按下的错觉，这种感受就很不对了，而对于:focus 的状态而言，咱们能够经过等会儿要讲的风格变化，经过颜色的变化凸显来解决：　　

　　接着还要对 :active(.active)、:active:focus、:active:hover 三个状态来作设置，设置一个内阴影，

/*鼠标按下且悬停、键盘空格按下且未松手*/
/*当空格按下没有松手，直接用tab键切换焦点后，被按下的组件将一直保持按下即:active状态*/
.btn:active:hover,
.btn:active:focus,
.btn:active,
.btn.active {
    background-image: none;
    -webkit-box-shadow: inset 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*内阴影（兼容）*/
    box-shadow: inset 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*内阴影*/
}

　　可以给人一种“按钮被按下去”的感受：

　　我以为这最须要作一个说明了，为啥 active:focus 要设置内阴影，而 focus 不用呢？由于前者表明的意思是经过点击后获取焦点，后者则并无这条限制，因此当你用 Tab 键来让按钮获取焦点的时候，天然不能表明按钮被按下。因此要作一个区分。另外还有一点要作一个说明，那就是 active 也要作一样的设置，由于咱们设置了 active:hover，会有一个问题，就是当咱们按下而且鼠标悬停在按钮上的时候，才会有内阴影，可是若是此刻你鼠标不悬停，而是“拖拽”着让光标离开了这个按钮，为了要让按钮依旧保持被按下（由于你的鼠标此刻依旧处于按下的状态没松手），那 active 就要作相同的设置，不然按钮会回到最初的状态，那这样就没有被按下的那种直观感受了。

　　最后咱们还要作一个基本设置：

1 /*去除键盘Tab选中、鼠标点击时的边框*/
2 .btn:focus,
3 .btn:active {
4     outline: 0;
5 }

　　由于一些浏览器，会默认的加上这个属性，在你点击按钮时，会自动生成一个外边框，这个外边框我我的不喜，由于当个人组件是圆角矩形的时候，边框依旧仍是直角矩形，这很是很差，超级难看，好比：

　　outline 不能设置为圆角（除了火狐独有这个属性，但兼容性很差，因此不打算采用这个样式），网上我看到其余替代方案，是用 box-shadow 来模仿的，效果还能够，可是一个 box 只能有一个 shadow，这样就等于让我放弃使用 box-shadow 因此最后我仍是不打算采用这种样式，感受也不是很重要，就算没有 outline 也能够将按钮经过添加一些颜色来使其很醒目。

　　同时咱们增长了.focus 和.active 两个类样式，这样咱们就能够经过设置 class 属性，来让咱们的按钮主动的显示聚焦或点击的样式了。

　　OK 了，这是最基本的样式设计，兼容性稳稳的，不论哪一个浏览器，效果都是同样的。当你看到“基础”两个字的时候，就应该知道，我们的文章，不可能就这么完了，那多没意思呀。

　　如今 CSS 都流行使用嵌套或覆盖等手法，作一些多样性的扩展，咱们固然也要追逐潮流啦。

 

　Button 的多样化：

　　咱们设计 Button 的基础模型，可是基础模型依旧仍是很单调的，并且有不少状态实际上是共用样式，如何让咱们的按钮显得更加生动呢？这就是咱们接下来要干的活了。

　　咱们设计出如下7种风格以供选择：

1. 　　btn-default：
2. 　　btn-inverse：
3. 　　btn-primary：
4. 　　btn-success：
5. 　　btn-info：
6. 　　btn-warning：
7. 　　btn-danger：

　　看着是否是很眼熟呀？没错，3-7的风格取名字是参照 Bootstrap 的，毕竟 Bootstrap 已是很是流行的框架了，树立了一种标准，咱们在设计样式表的时候，若是能保持一致，那使用者使用的时候，就会下降不少重复学习的门槛，用起来也比较方便，而我本身最后加了1个风格：btn-inverse，由于我我的是黑白党，很喜欢黑白风，并且有的场景使用这种比较严肃的配色也挺好。

Default　Default

---

 

　　咱们已经定义了 Button 的基础样式，如今咱们要定义的是风格状态，定义风格状态基本上只须要修改三个属性： 

• • color
  • background-color
  • border-color

　　而后咱们要根据以前说的，button 的不一样状态，来进行编写，首先书写正常状态：

1 .btn-default {
2     color: #000;
3     background-color: #ffffff;
4     border-color: #000000;
5 }

　　而后在设计当鼠标悬停或者 tab 选中时的效果，同时还要加入，当咱们手动将按钮设置为 focus 状态或设置了 active 状态下的 focus 状态，来保持状态的一致性：

1 .btn-default:hover,
2 .btn-default:focus,
3 .btn-default.focus,
4 .btn-default.active:focus{
5     color: #000;
6     background-color: #ebebeb;
7     border-color: #000000;
8 }

　　接下来就是比较须要细心的部分了，这部分 hover 和 focus 是有定义前后顺序的，咱们来设置当按钮被按下后的样式：

 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 }
13 
14 .btn-default:active,
15 .btn-default.active {
16     color: #000;
17     background-color: #ffffff;
18     border-color: #000000;
19 }

　　OK，最后效果就像这组按钮同样了，第二个是设置了active 状态，第三个是设置了 focus 状态。

Default Default Default

　　好了，咱们基本上是按照这个范式来设计不一样的风格便可，只须要简单地调节一下颜色，基本上能够理解为按下的颜色为最“深”，鼠标有悬停比没悬停颜色更“深”，有焦点比没焦点颜色更“深”，正常状态下颜色最“浅”，这样的一个思惟，再对比 Button 的不一样状态来设计就好了，而后细节上再作一些调整，搭配出一个你最喜欢的。

　　咱们最后再来设计一个，比较特殊的，就是黑色的按钮（深色系按钮也能够参照这个逻辑）：

Inverse  Inverse

---

　　深色系跟浅色系设计师不一样的，为何呢？实际上是由于咱们设计的基础样式的缘由，简单的说，咱们基础样式里，阴影是黑色的，若是咱们的按钮背景是黑色，那内阴影就看不到了，天然是没办法识别出按钮被按下的状态，这个想像一下就应该能够理解，因此咱们要作一些调整。

.btn-inverse {
    color: #ffffff;
    background-color: #000000;
    border-color: #404040;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse.focus,
.btn-inverse.active:focus {
    color: #ffffff;
    background-color: #282828;
    border-color: #404040;
}

.btn-inverse:active:focus {
    color: #ffffff;
    background-color: #383838;
    border-color: #000000;
}

.btn-inverse:active:hover,
.btn-inverse.active:hover {
    color: #ffffff;
    background-color: #4d4d4d;
    border-color: #000000;
}

/*调整内阴影为白色，而且 Y 轴的位移改成"-"的，就是自下而上，内阴影的状态也添加了几种，你们能够本身去调试看看效果，就知道为何要加了*/
.btn-inverse:active:hover,
.btn-inverse.active:hover,
.btn-inverse:active:focus,
.btn-inverse:active,
.btn-inverse.active {
    -webkit-box-shadow: inset 0 -0.2rem 0.2rem rgba(255, 255, 255, 0.52); /*内阴影（兼容）*/
    box-shadow: inset 0 -0.2rem 0.2rem rgba(255, 255, 255, 0.52); /*内阴影*/
}

.btn-inverse:active,
.btn-inverse.active {
    color: #ffffff;
    background-color: #232323;
    border-color: #000000;
}

　　深色系的按钮组件基本能够参考这个模板来对色彩进行调配。值得关注的就是内阴影的状态多了几种，而且内阴影自身的属性有一些变化，具体以下：

Inverse Inverse Inverse

 

 　　其实这没有什么很厉害的东西，前端设计，关键在于一个思路，如何把复杂繁多的样式，经过一些抽象、分类的思想，逐渐的造成一个思路，再根据思路进行统一的，有条理的设计，这样就可以保持总体风格一致的状况下，灵活建立一些很棒的样式，CSS还有不少内容，一篇文章说不完，有心得朋友应该能够发现，我写的样式已经应用到了个人博客当中，我但愿经过一点一点的努力，最终可以造成一套，属于本身的框架。