如何按规范编写按钮的CSS类及Hover状态样式？

我来帮你梳理下正确的写法，先指出你现有代码里的几个小问题，再给出完整的实现方案：

现有代码的问题 #

• border: rgb(12,116,218); 写法不完整：border是简写属性，必须包含宽度、样式、颜色三个值（至少要指定样式，比如solid），否则浏览器不会渲染出边框。
• border-bottom: rgb(0,76,151); 同样缺少宽度和样式声明，无法正确显示底部的深色边框。
• 缺少按钮的基础样式（比如文字颜色、内边距、光标样式），这些细节会影响按钮的可用性和美观度。

完整的常态按钮CSS #

根据你提供的设计规范，我补充了必要的样式，让按钮更贴合设计：

.btn {
  /* 常态背景色，匹配设计 */
  background-color: rgb(12, 116, 218);
  /* 完整边框设置：1px实线主色，底部用深色边框增强层次感 */
  border: 1px solid rgb(12, 116, 218);
  border-bottom: 2px solid rgb(0, 76, 151);
  /* 文字样式：白色、清晰的字体大小 */
  color: #fff;
  font-size: 14px;
  /* 内边距：保证按钮有足够的点击区域 */
  padding: 8px 16px;
  /* 光标：hover时显示指针，提示可点击 */
  cursor: pointer;
  /* 圆角：如果设计里有圆角可以调整数值，无圆角则设为0 */
  border-radius: 4px;
  /* 去掉浏览器默认的按钮轮廓 */
  outline: none;
  /* 去掉默认按钮的额外样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Hover状态的CSS实现 #

使用CSS的:hover伪类来定义鼠标悬停时的样式，匹配你的Hover设计：

.btn:hover {
  /* Hover时背景色稍深，对应设计的高亮效果 */
  background-color: rgb(0, 90, 180);
  /* 边框颜色同步调整，保持视觉统一 */
  border-color: rgb(0, 76, 151);
  /* 可选：添加轻微阴影增强交互感 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

可选：点击状态（Active）的增强 #

如果需要模拟按钮按压的效果，可以加上:active伪类的样式：

.btn:active {
  /* 点击时按钮轻微下移，模拟按压感 */
  transform: translateY(1px);
  /* 底部边框变窄，配合下移效果 */
  border-bottom-width: 1px;
}

把这些CSS代码放到你的<style>标签或外部CSS文件中，就能和你的HTML代码完美配合啦！

内容的提问来源于stack exchange，提问作者Niranjan