Как изменить цвет при нажатии CSS

Для изменения цвета при нажатии, можно использовать псевдокласс :active в CSS. Псевдокласс :active срабатывает в момент нажатия на элемент и позволяет задать стили для этого состояния.

Например, следующий код меняет цвет текста кнопки при нажатии:

.button:active {
  color: red; /* новый цвет текста */
}

Вы можете использовать любые другие свойства для задания стилей при нажатии на элемент, например, изменить фоновый цвет или добавить анимацию. Вот несколько других примеров:

/* изменение цвета фона нажатой кнопки */
.button:active {
  background-color: yellow;
}

/* добавление теней при нажатии на элемент */
.element:active {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* добавление анимации изменения цвета при нажатии на ссылку */
a:active {
  color: blue;
  animation: linkClick 0.2s ease-out;
}

@keyframes linkClick {
  0% {
    color: blue;
  }
  50% {
    color: green;
  }
  100% {
    color: blue;
  }
}

В каждом из этих примеров мы используем псевдокласс :active, чтобы указать стили для нажатого элемента. Вы можете выбрать любое свойство, чтобы изменить внешний вид элемента при его активации.