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

Lion Digital Agency

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

теги:

Категории

Рубрики

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

от 14000 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

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

от 119000 

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

Есть несколько способов создания красивых кнопок в CSS. Рассмотрим один из самых простых и эффективных.

HTML-код кнопки:

<a href="#" class="button">Кнопка</a>

CSS-код кнопки:

.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background-color: #4374d9;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #3462c0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

Объяснение CSS-свойств:

  1. display: inline-block — для того чтобы задать нужную ширину и высоту кнопки, не меняя ее позицию на странице (inline элементы не могут задавать ширину и высоту).
  2. padding — отступы внутри кнопки.
  3. font-size, font-weight и text-transform — настройка шрифта кнопки.
  4. text-align и text-decoration — для выравнивания содержимого внутри кнопки.
  5. background-color и color — задание фона и цвета текста кнопки.
  6. border-radius — скругление углов кнопки.
  7. box-shadow — эффект тени рядом с кнопкой.
  8. cursor — курсор при наведении на кнопку.
  9. transition — плавное изменение свойств при наведении на кнопку.
  10. :hover — псевдокласс, задающий стили при наведении курсора на элемент.

Эти свойства позволяют создавать разнообразные кнопки, меняя цвета и отступы, добавляя бордер (обрамление), внешнюю тень или разные анимационные эффекты при наведении. Все зависит от вашей фантазии и потребностей дизайна.

Поделиться:

Комментарии

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

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

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

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

Меню

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

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