Как создать: вертикальная кнопка группы

Как использовать CSS для создания вертикальной "кнопки группы".

Как создать вертикальную кнопку группы

第一步 - Добавление HTML：

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

第二步 - Добавление 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 кнопка