正在加载...

CSS 按钮

按钮是「去做」的控件——发送、保存、下一步。CSS 可以给它们清晰的外观，并在悬停、按下、聚焦或禁用时给出诚实反馈。保持 HTML 语义（button 或 submit 输入）；本课讲外观与状态。

按钮工具箱

📊 按钮一览

部件 日常作用
padding + background + border 做出扎实、可读的按钮表面
border-radius 柔化圆角（或用大半径做成胶囊）
:hover / :active 显示「我可交互」和「我被按下」
:focus-visible 保持键盘焦点环可见
:disabled + cursor 淡化不可用按钮；可点击时用手形光标

样式化一个共享的 .btn（或 button），让页面上的主要操作属于同一家族。文本字段的 padding 是上一课——这里给点击目标穿衣服。

扎实的主按钮

从舒适的 padding、清晰背景、可读文字颜色和安静的 border-radius 开始。优先用 font: inherit，让按钮与附近文字一致。

基础主按钮

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover 与 active——诚实反馈

:hover 可以把表面稍微加深或变浅。:active 应有被按下的感觉——更深一档或微小位移——而不是全新的霓虹主题。

Hover 与 active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

看得见的焦点

切勿在没有替代方案时去掉焦点样式。:focus-visible 为键盘用户画出清晰的环，并保持鼠标点击安静。

可见焦点环

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

禁用按钮仍要可见

Disabled 按钮应看起来不可用——更低不透明度或淡化颜色——并拒绝手形光标。不要从布局中隐藏它。

Disabled 色调

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

安静的按钮习惯

保持一种主外观、清晰的 hover/active、可见焦点环和淡化的 disabled。Outline/ghost 变体可共享相同 padding 与圆角，让整套看起来相关。

Outline 同伴

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

自己试试

  1. 用 padding、背景、文字颜色和 border-radius 样式化主 button。
  2. 加深 :hover，并略加深 :active。
  3. 添加 :focus-visible 轮廓——不要裸露的 outline: none。
  4. 淡化 :disabled 按钮并设置 cursor: not-allowed。
  5. 可选：添加共享 padding 与圆角的 .btn-outline。

常见错误

  • 没有焦点替代就写 outline: none（键盘用户会迷失）
  • 过小的 padding 导致手机触控目标失败
  • 把本课做成 input/textarea 样式（那是表单控件课）
  • :hover 上狂野霓虹主题破坏品牌安静感
  • 只样式化 a 而忘记真正的 button

小结

  • Padding、背景、边框和圆角构成扎实的按钮表面
  • :hover 与 :active 给出诚实的交互反馈
  • 保持可见的 :focus-visible 环
  • 淡化 :disabled；可点击时使用 cursor: pointer
  • 字段外观留给表单控件课；这里给点击目标穿衣服

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 34 的 35
Css 教程