垂直按钮组

---

了解如何使用 CSS 创建一个垂直的"按钮组"。

---

垂直按钮组

将一系列按钮组合成一个垂直按钮组:

Apple Samsung Sony
Apple Samsung Sony

亲自试一试 »

---

如何创建垂直按钮组

步骤 1) 添加 HTML:

实例

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

---

步骤 2) 添加 CSS:

实例

.btn-group button {
  background-color: #4CAF50; /* 绿色背景 */
  border: 1px solid green; /* 绿色边框 */
  color: white; /* 白色文本 */
  padding: 10px 24px; /* 一些填充 */
  cursor: pointer; /* 指针/手形图标 */
  width: 50%; /* 如果需要，设置宽度 */
  display: block; /* 使按钮显示在彼此下方 */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* 防止双边框 */
}

/* 在悬停时添加背景颜色 */
.btn-group button:hover {
  background-color: #3e8e41;
} 亲自试一试 »

---

提示: 转到我们的 CSS 按钮教程，了解更多关于如何设置按钮样式的信息。