css按钮制作

基础按钮样式

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

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

悬停与点击效果

通过:hover和:active伪类添加交互效果：

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

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

渐变与阴影

使用linear-gradient和box-shadow增强视觉层次：

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

图标按钮

结合::before伪元素或<i>标签添加图标：

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

禁用状态

通过:disabled或.disabled类控制不可点击状态：

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

响应式按钮

使用媒体查询调整不同屏幕尺寸下的样式：

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