CSS 按钮

封面图 • 2025-11-15 • Html/Css

在 CSS 中创建一个按钮是一个很常见的任务。你可以使用 HTML 和 CSS 来创建一个美观的按钮。以下是一个基本的示例：

---

### ✅ 基本 HTML + CSS 按钮示例：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS 按钮示例</title>
  <style>
    .my-button {
      background-color: #4CAF50; /* 绿色背景 */
      color: white;              /* 白色文字 */
      padding: 12px 24px;        /* 内边距 */
      border: none;              /* 去掉边框 */
      border-radius: 5px;        /* 圆角 */
      font-size: 16px;           /* 字体大小 */
      cursor: pointer;           /* 鼠标悬停时变为手型 */
      transition: background-color 0.3s ease; /* 过渡效果 */
    }

.my-button:hover {
      background-color: #45a049; /* 鼠标悬停时颜色变深 */
    }
  </style>
</head>
<body>

</body>
</html>
```

---

### 📌 可选样式增强

你可以添加更多样式来让按钮更漂亮，比如阴影、渐变背景、悬停动画等。

#### 示例：带阴影和悬停动画的按钮

```css
.my-button {
  background: linear-gradient(to right, #4CAF50, #81C784);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.my-button:hover {
  transform: scale(1.05); /* 鼠标悬停时稍微放大 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
```

---

### 🧾 其他常见按钮样式（可选）

| 类型 | 样式 |
|------|------|
| 按钮 | `.my-button` |
| 红色按钮 | `background-color: #f44336;` |
| 蓝色按钮 | `background-color: #2196F3;` |
| 灰色按钮 | `background-color: #9E9E9E;` |
| 渐变按钮 | `background: linear-gradient(...);` |

---

如果你有特定的需求，比如按钮的形状（圆形、方形）、响应式设计、图标按钮等，也可以告诉我，我可以提供更详细的代码！