css 按钮制作

基础按钮样式

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

.button {
  background-color: #4CAF50; /* 背景色 */
  color: white; /* 文字颜色 */
  padding: 10px 20px; /* 内边距 */
  border: none; /* 移除默认边框 */
  border-radius: 5px; /* 圆角 */
  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: none; /* 移除阴影 */
}

渐变与边框按钮

通过 linear-gradient 或 border 增强视觉层次：

.gradient-button {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变背景 */
  border: 2px solid #ff7e5f; /* 边框 */
}

禁用状态

使用 :disabled 或自定义类控制不可点击状态：

.button:disabled {
  opacity: 0.6; /* 降低透明度 */
  cursor: not-allowed; /* 禁用指针 */
}

图标按钮

结合 flexbox 和 ::before/::after 添加图标：

.icon-button {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文字间距 */
}
.icon-button::before {
  content: "→"; /* 使用 Unicode 或 Font Awesome */
}

响应式按钮

使用媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .button {
    padding: 8px 16px; /* 小屏幕减小内边距 */
    font-size: 14px;
  }
}