可访问的交互状态模式

1/* 基础按钮样式 */
2button {
3  background-color: #005fcc;     /* 默认背景颜色 */
4  color: white;                  /* 文本颜色 */
5  border: none;                  /* 无边框 */
6  padding: 0.75rem 1.25rem;      /* 内边距，用于调整大小 */
7  border-radius: 4px;            /* 圆角 */
8  cursor: pointer;               /* 悬停时显示指针光标 */
9  transition: background-color 0.2s ease; /* 背景颜色平滑过渡 */
10}
11
12/* 悬停状态 */
13button:hover {
14  background-color: #004bb5;     /* 悬停时背景颜色稍深 */
15}
16
17/* 键盘导航的焦点可见状态 */
18button:focus-visible {
19  outline: 2px solid #2684FF;    /* 蓝色轮廓以表示焦点 */
20  outline-offset: 2px;           /* 按钮与轮廓之间留有轻微间距 */
21}
22
23/* 激活（按下）状态 */
24button:active {
25  background-color: #003f99;     /* 更深的色调，表示已按下 */
26}
27
28/* 禁用状态 */
29button:disabled {
30  background-color: #ccc;        /* 禁用时的灰色背景 */
31  color: #666;                   /* 文本颜色变暗 */
32  cursor: not-allowed;           /* 光标表示不可交互 */
33}