どう作成するか：垂直ボタンチーム
- 前のページ ボタングループ
- 次のページ 粘性ソーシャルナビゲーションバー
CSSを使って垂直「ボタンチーム」を作成する方法を学ぶ。
垂直ボタンチーム
一連のボタンを垂直ボタンチームにグループ化する：
垂直ボタンチームを作成する方法
第1ステップ - HTMLを追加：
<div class="btn-group"> <button>Apple</button> <button>Samsung</button> <button>Sony</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ボタン
- 前のページ ボタングループ
- 次のページ 粘性ソーシャルナビゲーションバー
