如何 - 按鈕組
瞭解如何建立 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; /* 指標/手形圖示 */
float: left; /* 按鈕並排浮動 */
}
.btn-group button:not(:last-child) {
border-right: none; /* 防止雙邊框 */
}
/* 清除浮動（clearfix hack） */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* 懸停時新增背景顏色 */
.btn-group button:hover {
background-color: #3e8e41;
}
自己動手試一試 »
兩端對齊 / 全寬按鈕組
示例
<!-- 按鈕組中的三個按鈕 -->
<div class="btn-group" style="width:100%">
<button style="width:33.3%">蘋果</button>
<button style="width:33.3%">三星</button>
<button style="width:33.3%">索尼</button>
</div>
<!-- 按鈕組中的四個按鈕 -->
<div class="btn-group" style="width:100%">
<button style="width:25%">蘋果</button>
<button style="width:25%">三星</button>
<button style="width:25%">索尼</button>
<button style="width:25%">HTC</button>
</div>
自己動手試一試 »
提示：訪問我們的 CSS 按鈕教程，瞭解更多關於如何設定按鈕樣式的資訊。
