Как сделать кнопку в HTML и CSS

Кнопку делают тегом <button>, если она выполняет действие, и ссылкой <a>, если она ведёт на другую страницу. Выглядеть в CSS они могут одинаково:

<button type="button" class="btn">Показать ещё</button>
<a href="signup.html" class="btn">Записаться на курс</a>

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background-color: #1a73e8;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #155ab6;
}

.btn:focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 2px;
}

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

• display: inline-block — нужен ссылке: без него у строчного <a> вертикальный padding не раздвигает строки.
• border: none — убирает рамку, которую браузер рисует кнопке по умолчанию.
• font: inherit — кнопка по умолчанию берёт системный шрифт, а не шрифт страницы; эта строка это исправляет.
• text-decoration: none — убирает подчёркивание у ссылки.
• cursor: pointer — указатель-«рука» при наведении.
• transition — цвет при наведении меняется плавно, за 0,2 секунды.
• :focus-visible — рамка, когда до кнопки дошли клавишей Tab. Не убирайте выделение фокуса совсем: без него людям без мыши не понять, где они на странице.

button или a

Внутри <form> у <button> без type действует type="submit": кнопка «Показать пароль» без type="button" отправит форму. Поэтому type лучше писать всегда.

Полезные варианты

Кнопка во всю ширину блока — удобна на телефоне:

.btn-wide {
  display: block;
  width: 100%;
}

Кнопка-контур:

.btn-outline {
  background-color: transparent;
  color: #1a73e8;
  border: 2px solid #1a73e8;
}

Неактивная кнопка — атрибут disabled: на неё нельзя нажать, а в CSS её видно по :disabled:

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

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

У ссылки атрибута disabled нет — если переход не нужен, это не ссылка.

Подводные камни

• Кнопка из <div> — не работает с клавиатуры, программы чтения с экрана не считают её кнопкой. Берите <button>: всё это у него есть сразу.
• Ссылку-кнопку не видно в строке целиком — забыт display: inline-block, и отступы налезли на соседние строки.
• Кнопки по центру — text-align: center у родителя (для inline-block) или margin: 0 auto у кнопки с display: block и шириной. Подробно — в справке Как выровнять по центру.
• Мелкие кнопки на телефоне — по ним трудно попасть пальцем. Оставьте высоту хотя бы около 44 пикселей.