CSS div как кнопка

Для того, чтобы элемент div был похож на кнопку, вы можете применить к нему такие стили, как background-colorcolorborderpaddingfont-size и т.д.

Вот пример, как сделать элемент div похожим на кнопку:

<div class="btn">Нажми меня</div>
.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

Здесь мы используем следующие свойства:

  • background-color — цвет фона кнопки;
  • border — стиль и ширина рамки вокруг кнопки (в данном случае рамка отсутствует);
  • color — цвет текста на кнопке;
  • padding — внутренний отступ кнопки;
  • text-align — выравнивание текста внутри кнопки;
  • text-decoration — стиль подчеркивания ссылки (в данном случае ссылка не является);
  • display — свойство, которое позволяет элементу быть расположенным как кнопка;
  • font-size — размер шрифта на кнопке;
  • border-radius — радиус закругления углов кнопки;
  • cursor — тип курсора при наведении на кнопку.

Вы можете менять значения переменных и стили под свои нужды.

реклама

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

реклама

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

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

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

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

Закажите услугу CSS div как кнопка

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