Recomendação de curso:
- Página anterior Grupo de botões
- Próxima página Barra social adesiva
Como criar: grupo de botões verticais
Grupo de botões verticais
Agrupe uma série de botões em um grupo de botões verticais:
Como criar um grupo de botões verticais
Primeira etapa - Adicionar HTML:
<div class="btn-group"> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div>
Segunda etapa - Adicionar 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; }
Páginas relacionadas
Tutorial:Botão CSS
- Página anterior Grupo de botões
- Próxima página Barra social adesiva