共计 1501 个字符，预计需要花费 4 分钟才能阅读完成。
1. Button 在 PC 端的 3 种状态
在 PC 端，如果你想本人实现一个让用户体验好的 Button，至多须要设置 3 种状态的款式：
- 常态
- Hover 态
- Active 态
（当然，你能够视状况减少其它状态，例如 Disabled 态、Loading 态）
拿 ant design 举例子，介绍下 3 种状态：
常态
Hover 态（光标悬浮在按钮上）
这种状态，通常的设计规范是：元素亮度比常态高。且鼠标是手形。（目标是突出展现鼠标停留的元素，防止点错按钮）
Active 态（光标左键按下按钮并放弃按住）
这种状态，通常的设计规范是：元素亮度比常态低。（目标是反馈给用户元素已被点击，且亮度跟 Hover 态造成反差，让用户明确晓得我点了哪个）
2. Button 在挪动端不须要 Hover 态
而在挪动端，通常是不须要 Hover 态的。
为什么？
因为在触摸屏设施上，你点哪里，“光标”就会固定在那里，你滑动到哪里，“光标”也会继续固定在那里。
这会导致 Hover 态继续触发，但此时手指曾经来到设施了，且屏幕上是看不到光标的（大部分挪动端用户并不知道挪动端也有“光标”），所以用户第一反馈会是——你的代码有 bug。
挪动端注意事项
因为没有 Hover 态，所以挪动端上，Active 态肯定要跟常态差别足够显著，给用户制作一种「反差」。
例如本文的封面图，我开发的「斗地主」游戏，「创立房间」按钮的 Active 态跟常态有很大款式差别，就是为了制作「反差」。
当然，很多挪动端浏览器，为了让 Active 态更显著，设置了这个默认的款式：-webkit-tap-highlight-color，会在用户碰到可交互元素时，有个十分亮的半透明的填充矩形。
如果你心愿各个挪动端浏览器上放弃对立的交互体验，倡议重写这个款式：
button:active {-webkit-tap-highlight-color: rgba(0 0 0 / 0);
}而后，靠本人，把 active 款式调整的显著些。
如何给 PC 端加 Hover，不给手机加 Hover？
如果你的触摸屏设施外接了键盘，那么它是有光标的，既然有光标，就须要 Hover 态。
问题来了，咱们该怎么晓得设施有没有光标呢？而后咱们就能够给有光标的加 Hover 态，没光标的疏忽 Hover 态了。
答案是：any-hover。
@media (any-hover: hover) {
button:hover {background: yellow;}
}将只会在用户有光标的状况下，展现 Hover 态款式。
3. 留神款式程序
应该先写 hover 款式，而后再写 active 款式。这样 active 状态的款式能力笼罩 hover 状态的款式。
残缺 css 代码如下：
@media (any-hover: hover) {
button:hover {background: yellow;}
}
button:active {
background: green;
-webkit-tap-highlight-color: rgba(0 0 0 / 0);
}4. 写在最初
如果你像我一样，喜爱代码 纯正 一点，不夹杂冗余性能，就能够本人写 Button，封装本人所需的组件 😎
如果你只是为了实现他人的需要，还是间接用组件库吧，就没这么多要操心的了。兴许组件库性能很重体积很大，但思考全面 😁
我是 HullQin，公众号「线下团聚游戏」的作者 （欢送关注公众号，分割我，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我噢～我有空了会分享做游戏的相干技术。
