Как сделать ховер css

Эффект ховера в CSS можно создать с помощью псевдокласса :hover, который применяется к элементу при наведении на него курсора мыши. Свойства, заданные для селектора :hover, будут применяться к элементу только в момент, когда курсор находится над ним.

Пример:

HTML:

<button class="btn">Наведите курсор на меня</button>

CSS:

.btn {
  padding: 10px 20px;
  background-color: #3d3d3d;
  color: white;
  border: none;
  border-radius: 5px;
}

.btn:hover {
  background-color: #6d6d6d;
  color: #fff;
  box-shadow: 0 0 5px #000;
}

В данном примере при наведении на кнопку, ее фон и цвет текста меняются на более светлый. Также добавлен эффект тени при помощи свойства box-shadow.

Также можно использовать эффект изменив бордер:

CSS:

.btn {
  padding: 10px 20px;
  background-color: #3d3d3d;
  color: white;
  border: none;
  border-radius: 5px;
}

.btn:hover {
  border: 1px solid white;
}

В данном примере при наведении на кнопку появляется белая граница шириной 1px, что выглядит как обводка кнопки.