Как сделать кнопку активной css

Для изменения стиля кнопки при наведении на нее курсора мыши и при ее активации (нажатии на нее) существуют псевдоклассы :hover и :active соответственно.

Например, вы можете сделать кнопку с градиентным фоном и изменять цвета градиента при наведении на нее и при ее активации.

HTML:

<button class="btn">Кнопка</button>

CSS:

.btn {
  padding: 10px 20px;
  background: linear-gradient(to bottom right, #FF1493, #FF69B4, #FFA07A);
  border-radius: 50px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background: linear-gradient(to bottom right, #FFDAB9, #FFEFD5, #FFE4E1);
}

.btn:active {
  background: linear-gradient(to bottom right, #FF69B4, #FFA07A, #FF1493);
}

При наведении на кнопку изменится градиент на более светлый и при активации на более темный. Вы также можете изменять другие свойства (например, цвет текста или тени) для дополнительной стилизации кнопки при наведении и активации.