css 制作按钮样式

基础按钮样式

使用 background-color、color、padding 和 border-radius 创建基础按钮。示例代码：

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

悬停效果

通过 :hover 伪类添加交互效果，如颜色变化或阴影：

.button:hover {
  background-color: #45a049;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

点击动画

使用 :active 伪类模拟按下效果，或通过 transform 实现缩放：

.button:active {
  transform: scale(0.98);
}

渐变背景

通过 linear-gradient 创建渐变按钮，增强视觉效果：

.gradient-button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
}

边框按钮

利用 border 属性设计镂空风格按钮：

.border-button {
  background: transparent;
  color: #4CAF50;
  border: 2px solid #4CAF50;
  padding: 8px 16px;
  border-radius: 4px;
}

禁用状态

使用 :disabled 或 .disabled 类控制按钮不可用样式：

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

图标按钮

结合伪元素或内联图标（如 Font Awesome）设计带图标的按钮：

.icon-button::before {
  content: "→";
  margin-right: 8px;
}

阴影与3D效果

通过 box-shadow 增加立体感：

.shadow-button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
}