Кнопка-блок во всю ширину

alexei27/07/2021 - 09:35

Здесь вы узнаете, как можно сделать кнопку-блок во всю ширину области просмотра.



Как сделать кнопку во всю ширину области просмотра

Шаг 1) Добавляем HTML:


<button type="button" class="block">Кнопка-блок</button>

Шаг 2) Добавляем CSS:

Чтобы создать кнопку шириной во всю область просмотра, добавьте значение ширины в 100% и сделайте ее блоковым элементом:


.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #04AA6D;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}