css制作按键

CSS 制作按键的方法

基础按键样式

使用 padding 和 border-radius 创建基础按钮形状，添加 background-color 和 color 定义外观：

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

悬停效果

通过 :hover 伪类实现交互反馈，改变背景色或添加阴影：

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

按下状态

使用 :active 伪类模拟按键被按下的效果，缩小尺寸或改变阴影：

.button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

禁用状态

通过 .disabled 类或 :disabled 伪类设置不可点击状态：

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

渐变与阴影

添加 linear-gradient 和 box-shadow 增强立体感：

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

图标按钮

结合伪元素或 Font Awesome 添加图标：

.icon-button::before {
  font-family: "Font Awesome";
  content: "\f054";
  margin-right: 8px;
}

响应式按钮

使用媒体查询调整不同屏幕尺寸下的按钮大小：

@media (max-width: 600px) {
  .button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

动画效果

通过 transition 或 @keyframes 添加点击动画：

.button {
  transition: all 0.3s ease;
}

.button:active {
  animation: press 0.2s linear;
}

@keyframes press {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}