如何用HTML和CSS设计矩形按钮？求完整代码解决方案

根据你提供的按钮样式，以下是对应的HTML和CSS实现方案，还原了附图中的深蓝色矩形按钮及交互效果：

HTML 代码 #

<button class="custom-btn">Click Me</button>

CSS 代码 #

.custom-btn {
  background-color: #165DFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(22, 93, 255, 0.2);
}

.custom-btn:hover {
  background-color: #0D47A1;
  box-shadow: 0 4px 8px rgba(22, 93, 255, 0.3);
}

.custom-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(22, 93, 255, 0.2);
}

关键样式说明 #

• 主色调与文字：用#165DFF作为按钮背景色，搭配白色文字，匹配附图的视觉风格
• 圆角与阴影：border-radius:4px添加轻微圆角，配合阴影增强按钮立体感
• 交互反馈：hover时加深背景色并放大阴影，点击时通过transform实现按压位移，提升用户体验
• 过渡动画：transition属性让状态切换更平滑，避免生硬的样式变化

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