css 按钮制作

CSS 按钮制作方法

基础按钮样式

通过 padding、background-color、border 和 border-radius 创建基础按钮样式：

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

悬停效果

添加 :hover 伪类实现交互反馈：

.button:hover {
  background-color: #45a049;
}

点击效果

使用 :active 伪类模拟按压状态：

.button:active {
  transform: translateY(1px);
}

渐变与阴影

通过 linear-gradient 和 box-shadow 增强视觉效果：

.gradient-button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

边框按钮

创建透明背景的边框样式：

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

禁用状态

使用 :disabled 伪类设置不可用样式：

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

图标按钮

结合 Font Awesome 或 SVG 创建带图标的按钮：

.icon-button {
  padding-left: 40px;
  position: relative;
}
.icon-button::before {
  content: "\f054";
  font-family: "Font Awesome";
  position: absolute;
  left: 15px;
}

动画效果

使用 CSS 过渡或动画：

.animate-button {
  transition: all 0.3s ease;
}
.animate-button:hover {
  transform: scale(1.05);
}

响应式按钮

通过媒体查询适应不同屏幕尺寸：

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