Как изменить цвет при нажатии 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, чтобы указать стили для нажатого элемента. Вы можете выбрать любое свойство, чтобы изменить внешний вид элемента при его активации.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как изменить цвет при нажатии CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали