Как сделать красивую кнопку на CSS (padding, border-radius)?

Стилизация кнопки складывается из нескольких базовых свойств. Вот рабочий шаблон:

.btn {
  /* отступы внутри — кнопка дышит */
  padding: 12px 24px;
  /* свой цвет и текст */
  background: #4f46e5;
  color: #fff;
  /* убираем системную рамку */
  border: none;
  /* скругление углов */
  border-radius: 8px;
  /* типографика и курсор */
  font-size: 16px;
  cursor: pointer;
  /* плавность при наведении */
  transition: background 0.2s ease;
}

.btn:hover {
  background: #4338ca; /* темнее на наведении */
}

.btn:active {
  transform: translateY(1px); /* лёгкое «нажатие» */
}

<button class="btn">Отправить</button>

Что за что отвечает:

• padding: 12px 24px — вертикальный и горизонтальный внутренний отступ, кнопка не сжата вокруг текста;
• border-radius — скругление углов (чем больше, тем «таблеточнее»; 999px даст полностью круглые края);
• cursor: pointer — курсор-рука, важная мелочь для UX;
• transition — плавная смена цвета вместо резкого.

Типичные забывашки: оставить системный border, не задать cursor: pointer, забыть :hover — без него кнопка кажется неживой.