如何创建 - 垂直按钮组
了解如何使用 CSS 创建一个垂直的"按钮组"。
垂直按钮组
将一系列按钮组合成一个垂直按钮组:
如何创建垂直按钮组
步骤 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 按钮教程，了解更多关于如何设置按钮样式的信息。
