如果Web开发里面一个按钮组件只是徒具其形，而没有按钮该有的“行为”，那这按钮则还不算合格的按钮:

在基本样式篇我写下如下代码:

.simple-button {
  color: #fff;
  border: 0;
  font-size: 18px;
  outline: none;
  padding: 5px 10px;
  background: #ace;
  border-radius: 4px;
  
  /* 设置文字阴影 */
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  
  /* 设置盒子阴影 */
  box-shadow: 0 4px 0 #9cb8d8, 0 3px 20px rgba(0,0,0,0.3);
}

按钮变成了这个样子

Paste_Image.png

无论它是好看还是难看，它也仅仅只是看起来像个按钮罢了:

    1. 用户不知道这个东西是按钮还是图片。
    2. 用户点击的时候视觉上并没有给予任何反馈。   

第一个问题好解决，对于PC端用户，我们只需要在用户鼠标移动到按钮上面的时候，把用户的鼠标指针改变成“手指”样式,用户就知道这个是可以点击的组件。非常简单我们只需要添加这个css样式:

cursor: pointer;

Paste_Image.png

这样就够了吗，当然还不够，就算我们让用户知道这是一个可点击的按钮，但是用户点击的时候还是没有任何反馈，我相信，这会让用户很不爽。

这个问题要怎么解决？一般情况下的解决方案是

点击按钮的时候改变按钮的背景颜色，让用户点击的时候知道自己已经点击了。

确实这是一个解决方案，但是在我们这个例子里面效果可能不好。因为我们的按钮是“凸起来”的，单纯地去改变背景色的话按钮看起来还是凸起来的，就算加深颜色点击效果也不明显，

这里我想到两种效果

1. 点击的时候让按钮向下移动一点，然后让底部阴影偏移量稍微小一点，就有一种按钮被按下去的感觉了

这个时候我们请出 :active伪类,用它来设置盒子被“激活”时的样式，我们就用它来实现我们需要的点击效果，而且为了简单起见(当然还有兼容性)，我只用简单的相对定位来实现偏移

.simple-button:active {
  /* 样式基本上跟之前一样，只是盒子底部阴影垂直方向上的偏移量变小了 */
  box-shadow: 0 1px 0 #9cb8d8, 0 3px 8px rgba(0,0,0,0.2);
  position: relative;
  top: 3px;
}

这个时候按钮是什么效果？我用动图来展示一下:

a.gif

可见，现在已经有点击上的视觉反馈了，细心的朋友还会发现，按钮底部的阴影在按钮被点击的时候变小了。这是因为我稍微调整一下周边的阴影，使得点击效果更加明显。具体数值没什么必然，还是要根据自己感觉去调整。

2. 让按钮有整个被按下去的效果(点击的时候按钮整个嵌进去)，这样的点击效果让人感觉更加强烈。

我们可以通过给按钮内部设置阴影，让它看起来是被按下去了，其实box-shadow还可以提供一个inset的选项，用来设置内部的阴影（默认是外部阴影）。

现在修改上诉代码

.simple-button:active {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) inset;
  position: relative;
  top: 3px;
}

OK，再来看看效果

b.gif

现在看起来按钮已经被按到整个嵌进去了，交互上基本上符合我们的需求了。

加上交互的话现在的代码是这样的。(考虑到按钮被按下之后周围光源强度的变化， 我还适当修改了一下点击时刻文字阴影的数值)

.simple-button {
  color: #fff;
  border: 0;
  font-size: 18px;
  outline: none;
  padding: 5px 10px;
  background: #ace;
  border-radius: 4px;
  
  /* 设置文字阴影 */
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  
  /* 设置盒子阴影 */
  box-shadow: 0 4px 0 #9cb8d8, 0 3px 20px rgba(0,0,0,0.3);
  
  /* 交互性 */
  cursor: pointer;
}

.simple-button:active {
  
  /* 按钮按下去之后周围的光源应该没那么强烈了，所以可以考虑适当减少阴影 */
  text-shadow: 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
  position: relative;
  top: 3px;
}

OK，它已经有按钮该有的样子，以及交互行为了。接下来我们是不是要考虑怎么样才能让我们的代码更加灵活，可维护性更高一些? 考虑到篇幅问题，我打算放到下一篇文章再讨论这个问题。

感谢您的阅读

Happy Coding and Writing !!