Как сделать адаптивную кнопку 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 размер шрифта и отступы внутри кнопки уменьшаются.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

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

Наш специалист свяжется с вами в ближайшее время и уточнит детали