Вертикальная группа кнопок

 alexei 12/10/2021 - 09:03

Здесь вы узнаете, как сделать вертикальную "группу кнопок" при помощи 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;
}