如何做 - 垂直按鈕組
瞭解如何使用 CSS 建立垂直的“按鈕組”。
垂直按鈕組
將一系列按鈕組合成一個垂直按鈕組
如何建立垂直按鈕組
步驟 1) 新增 HTML
示例
<div class="btn-group">
<button>蘋果</button>
<button>三星</button>
<button>索尼</button>
</div>
步驟 2) 新增 CSS
示例
.btn-group button {
background-color: #04AA6D; /* 綠色背景 */
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 按鈕教程，瞭解更多關於如何設定按鈕樣式的資訊。
