css制作按钮效果

基础按钮样式

使用 background-color、padding、border-radius 和 color 创建基础按钮：

.button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

悬停效果

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

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

点击反馈

使用 :active 模拟按下效果，缩小按钮或加深颜色：

.button:active {
  transform: scale(0.98);
  background-color: #3e8e41;
}

渐变与阴影

结合 linear-gradient 和 box-shadow 增强立体感：

.button {
  background: linear-gradient(to bottom, #4CAF50, #2E8B57);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

过渡动画

通过 transition 平滑状态变化，提升用户体验：

.button {
  transition: all 0.3s ease;
}

边框按钮

使用透明背景和边框创建简约风格：

.border-button {
  background: transparent;
  border: 2px solid #4CAF50;
  color: #4CAF50;
  transition: all 0.3s;
}
.border-button:hover {
  background: #4CAF50;
  color: white;
}

禁用状态

通过 :disabled 或 .disabled 类设置不可点击样式：

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

图标按钮

结合伪元素或内联图标（如 Font Awesome）：

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