Как сделать кнопки одинакового размера css

Чтобы сделать кнопки одинакового размера в CSS, можно использовать следующие способы:

1. Указать фиксированную ширину и высоту для кнопок:

button {
  width: 100px;
  height: 40px;
}

Этот код задает фиксированные размеры для всех кнопок на странице.

2. Использовать относительные единицы измерения, такие как em, rem, или %, чтобы кнопки масштабировались относительно размера родительского контейнера или экрана пользователя:

button {
  width: 50%;
  height: 3em;
}

Здесь мы устанавливаем ширину кнопок в 50% от ширины родительского контейнера и высоту равную 3 em.

3. Использовать flexbox для создания гибких элементов управления:

.container {
  display: flex;
  justify-content: space-between;
}

button {
  flex: 1;
}

Здесь мы создаем флекс-контейнер, который располагает кнопки с помощью свойства justify-content. С помощью свойства flex мы задаем равную долю пространства для каждой кнопки внутри контейнера.

4. Добавить класс для всех кнопок и применить к ним стили, чтобы установить одинаковый размер для всех:

<button class="my-btn">Кнопка 1</button>
<button class="my-btn">Кнопка 2</button>
<button class="my-btn">Кнопка 3</button>

.my-btn {
  width: 100px;
  height: 40px;
}

Здесь мы добавляем класс «my-btn» для всех кнопок на странице и применяем к ним стили, которые устанавливают фиксированные размеры.

Вы можете выбрать любой из этих способов, который лучше всего подходит для ваших нужд.