Как сделать красивую кнопку в 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 — псевдокласс, задающий стили при наведении курсора на элемент.

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