css 按键制作

CSS 按键制作方法

使用 CSS 制作按键效果可以通过伪类、过渡和阴影等属性实现，以下为几种常见方式：

基础按键样式
通过 border、background 和 box-shadow 定义初始状态：

.button {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 0 #2980b9;
  cursor: pointer;
}

悬停与按下效果
利用 :hover 和 :active 伪类模拟交互：

.button:hover {
  background: #2980b9;
}

.button:active {
  box-shadow: 0 1px 0 #2980b9;
  transform: translateY(3px);
}

过渡动画增强体验
添加 transition 使状态变化更平滑：

.button {
  transition: all 0.2s ease;
}

3D 立体按键
通过多层阴影和边框实现深度感：

.button-3d {
  background: #e74c3c;
  box-shadow: 
    0 5px 0 #c0392b,
    0 8px 10px rgba(0,0,0,0.3);
}

.button-3d:active {
  box-shadow: 
    0 2px 0 #c0392b,
    0 3px 6px rgba(0,0,0,0.2);
  transform: translateY(3px);
}

禁用状态样式
使用 :disabled 或自定义类：

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

自定义图标按键
结合伪元素或内联 SVG：

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