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