这么多状态。

“状态”，指的是任何给定元素可能处于的上下文或情况。 让我们一起了解一下。

想象一个按钮。 哇，我爱按钮。 非常实用。 我们首先想到按钮的默认状态。 它看起来很漂亮，像个按钮，随时可以点击。 这就是一种状态。 在 CSS 中，我们通常会考虑更多

• :hover 状态
• :active 状态
• :focus 状态
• :visited 状态（如果是链接）

HTML 元素的类型也起作用。 有些元素很容易设置样式（<a>），有些需要一些额外的操作（<button>、<input type=submit>），有些则非常难（<input type=file>）。

按钮可能被禁用。 也许它已经被点击了，禁用按钮是向用户指示这一点的一种方式。 或者它是表单的一部分，在完成前面的区域之前无法使用，但禁用的按钮仍然保留在页面上，以向用户显示接下来会发生什么。

• [disabled] / :disabled 状态

按钮的变体可能具有相同的默认状态，只有交互状态发生变化。 例如，“关注”按钮可能具有默认的悬停状态。“已关注”按钮可以具有相同的普通状态，但悬停状态不同（表示：警告！点击此按钮将取消关注某人）。

按钮通常是文字，但它们不必是文字。 按钮的内容就像一个状态

• 按钮是一个词
• 按钮是一个图标或符号
• 按钮纯粹是视觉上的提示
• 组合

我们通常需要针对各种设计原因使用不同的按钮状态

• 一个大按钮
• 一个非常大的按钮
• 一个小按钮
• 彼此紧挨着的按钮
• 一个包含下拉菜单的按钮
• 一个点击后变成旋转器的按钮
• 不同颜色的按钮

如果按钮是文字，则该文字的长度很重要。 设计师需要围绕可变内容进行规划

• 按钮是一个非常短的词
• 按钮是一个中等长度的词
• 按钮是一个长词或一串词，可能是用户生成的内容
• 按钮太长，宽度超过其父元素

按钮的目的可以像一个状态。 它可能会影响按钮的外观或行为

• 按钮是一个提交按钮
• 按钮是一个删除/取消按钮
• 按钮是一个美化的链接
• 按钮发射核导弹

按钮出现的位置可能是一个状态。 如果您将按钮移动到另一个区域，按钮是否应该显示不同？

• 按钮出现在模态窗口中
• 按钮是英雄横幅中的号召性用语
• 按钮出现在页脚中
• 按钮位于表单的末尾
• 按钮位于导航栏内

也许我们需要针对按钮需要多少对比度来设置按钮状态

• 按钮需要脱颖而出
• 按钮需要融入背景

上下文可能是一个重要的状态。 按钮处于什么情况？

• 它是单独的吗？
• 旁边还有其他按钮吗？ 如果有，该按钮与之如何关联？
• 是否有一整行按钮？

我们的网站是动态的地方。 也许您的网站提供帐户、付费服务或社区功能。 任何给定的页面都可能根据这些功能具有不同的状态

• 用户已登录或已注销
• 用户是管理员
• 用户的账单是当前的还是逾期的
• 用户有未读消息

作为前端开发人员，我们知道有各种各样的设备用于访问网络。

• 低分辨率显示屏上的按钮
• 高像素密度显示屏上的按钮
• 按钮在靠近的小屏幕上
• 按钮在远离的大屏幕上

不同的设备具有不同的功能。 有时，这些功能受设备所有者的影响。 有时，具有这些功能的浏览器由于网络问题或其他问题而无法正常工作。

• JavaScript 未运行时的按钮
• CSS 未加载时的按钮
• 按钮内部的图标未显示时的按钮

使用此网站的人类也可能非常不同

• 看到按钮的人是色盲、散光或有其他视力障碍
• 需要激活按钮的人无法使用鼠标
• 需要查找按钮的人处于危机状态

也许页面类型需要不同的状态

• 出现在首页标题中的按钮
• 同一标题中的相同按钮，但在博客文章页面上，标题有意淡化
• 同一标题中的相同按钮，在销售登陆页面上

许多网站提供不同语言的内容，这意味着我们的按钮有不同的语言状态

• 英文按钮
• 西班牙语按钮
• 葡萄牙语按钮
• 阿拉伯语等从右到左语言的按钮
• 日语等包含符号的语言的按钮

按钮所在的上下文甚至可以超越网络本身！

• 现在几点？
• 用户所在的时区是什么？
• 餐厅是营业还是关门？
• 今天是活动日吗？ 活动是否已过去？
• 用户是否在地理位置上靠近自助洗衣店？
• 酿酒人队是赢了还是输了？

这么多状态。