Урок 12. Кнопки и наведение мыши

Ссылку легко превратить в кнопку — это просто вопрос оформления:

.knopka {
  display: inline-block;
  background: #23e0ff;
  color: #04121a;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
}

text-decoration: none убирает подчёркивание, которое браузер рисует у ссылок. display: inline-block разрешает задавать ссылке отступы и размеры.

Реакция на мышку — :hover

Двоеточие после селектора означает «в состоянии». :hover — «когда на элемент навели мышь»:

.knopka:hover {
  background: #7b7bff;
}

Обрати внимание: правило :hover пишется отдельным правилом, а не внутри обычного.

Плавность — transition

Без неё цвет меняется рывком. Одна строчка — и всё становится плавным:

.knopka {
  transition: 0.2s;
}

0.2s — это две десятых секунды. Такую мелочь замечаешь не сразу, но именно из подобных мелочей складывается ощущение «дорогого» сайта.

Частые вопросы