Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Услуги веб дизайна под ключ.

от 29500 

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

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

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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.