制作“1-40红色按钮红色按钮”，可以先确定按钮用途，再选择红色色值、补齐悬停和按下状态，最后检查文字对比与页面效果。下面按从基础到细节的顺序展开，并列出十种可直接参考的配色，便于把醒目的红色按钮落到实际界面中。
第一步：先确定按钮承担什么任务
红色醒目，适合用于提交、确认、购买、删除等需要用户注意的操作，但不宜让页面上的每个按钮都变成红色。先区分主操作和次操作：主操作采用实心红色，次操作使用浅色底或红色描边；取消、返回等操作则采用中性色。这样用户能迅速看出哪个动作最重要，也能避免多个红色按钮互相争夺注意力。
同时确定按钮的文字和尺寸。文字应直接说明动作，例如“立即提交”或“确认删除”，避免只写“确定”却没有上下文。常见桌面按钮高度可从40至44像素起步，移动端可从44至48像素起步；左右内边距按文字长度调整，确保按钮不显得拥挤。
第二步：从十种配色中选定基准
选择颜色时先定按钮底色，再为悬停状态准备更深一档的红色，最后确定页面浅底色。下表每行是一套完整搭配；一个界面优先选定一套作为主按钮颜色，不要把十种红色同时混用。
| 方案 | 按钮底色 | 悬停色 | 适用方向 |
|---|---|---|---|
| 经典红 | #E53935 | #C62828 | 通用提交与确认 |
| 朱红 | #D92D20 | #B42318 | 促销与重点提醒 |
| 深红 | #B42318 | #912018 | 商务后台主操作 |
| 珊瑚红 | #D94444 | #BF3535 | 轻快的内容界面 |
| 砖红 | #B9382F | #962D25 | 自然、稳重的视觉风格 |
| 莓果红 | #B4235A | #941B49 | 强调会员或个性化操作 |
| 橙红 | #C83E16 | #A83212 | 需要温暖感的行动按钮 |
| 酒红 | #8E2430 | #721B26 | 正式、克制的界面 |
| 玫瑰红 | #C42E62 | #A52651 | 柔和但仍需突出重点 |
| 暗红 | #9F1D20 | #7E171A | 深色或严肃主题界面 |
每种颜色都可搭配白色文字和浅红色背景，例如经典红按钮配#FFF3F2区域。若按钮文字较小，优先选择较深的底色，并检查文字与底色的对比是否清晰；不要只凭颜色名称判断可读性。
第三步：统一形状、留白与层级
按钮的圆角、字号和间距应与界面其他控件保持一致。常规圆角可设为6至8像素；偏轻松的产品可以增加圆角，偏正式的后台则使用较小圆角。按钮文字通常使用14至16像素，字重保持清楚即可。主按钮和次按钮并排时，高度应一致，主按钮可以通过实心底色突出，而不是单纯做得更大。
按钮周围留出足够间隔，避免误触，也不要把它紧贴输入框或说明文字。若按钮代表删除等不可逆动作，可用更深的红色并配上明确文案；如果只是普通导航，则不必使用强烈的警示红。
第四步：补齐悬停、按下和禁用状态
只有默认颜色的按钮容易显得像静态装饰。鼠标悬停时可换成表格中的深色，按下时再略微加深或轻微缩放；键盘聚焦时增加清楚的外轮廓，禁用时降低不透明度并取消阴影。状态变化应稳定、轻微，不要闪烁或突然改变尺寸。
.btn-red {
color: #fff;
background: #E53935;
border: 0;
border-radius: 7px;
padding: 11px 20px;
font-size: 15px;
cursor: pointer;
}
.btn-red:hover { background: #C62828; }
.btn-red:active { background: #A91F1F; }
.btn-red:focus-visible {
outline: 3px solid #F3A09D;
outline-offset: 3px;
}
.btn-red:disabled {
opacity: .55;
cursor: not-allowed;
}将示例中的底色和悬停色替换为选定方案即可。实际按钮文案可写成“立即提交”，禁用状态则应同时阻止重复操作，而不只是让按钮看起来变淡。
第五步：放进页面检查并微调
把按钮放到真实背景和相邻控件之间检查：红色是否仍然突出，白字是否容易辨认，按钮宽度是否容纳完整文案，按下和禁用状态是否一眼可分。再用键盘移动焦点，确认外轮廓没有被裁切；缩窄屏幕时，检查按钮是否挤压其他内容。依照“用途—配色—形状—状态—页面检查”逐步完成，就能做出醒目、易读且交互反馈完整的红色按钮。
