Как сделать адаптивную кнопку CSS

Для создания адаптивной кнопки в CSS можно использовать следующий код:

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0062cc;
}

@media (max-width: 768px) {
  .button {
    font-size: 14px;
    padding: 8px 16px;
  }
}

В данном примере создается класс .button, который задает стили для кнопки. С помощью свойства display: inline-block кнопка будет занимать только необходимое пространство, а не всю строку, как это делает блочный элемент.

Свойство padding задает отступы внутри кнопки, font-size и font-weight задают размер и жирность шрифта, text-align задает выравнивание текста по центру, text-decoration убирает подчеркивание ссылки, color задает цвет текста, background-color задает цвет фона, border-radius задает скругление углов, border задает границу, а cursor задает форму курсора при наведении на кнопку.

С помощью transition задается плавный переход при изменении стилей при наведении на кнопку.

В блоке @media задаются стили для кнопки при изменении размера экрана. В данном случае при ширине экрана до 768px размер шрифта и отступы внутри кнопки уменьшаются.

Таким образом, кнопка будет адаптивной истраиваться под размер экрана устройства, на котором она отображается.