В веб-разработке принято улучшать взаимодействие с пользователем, добавляя интерактивные элементы к кнопкам. Один из популярных методов — изменение цвета границы кнопки при нажатии. В этой статье мы рассмотрим несколько методов достижения этого эффекта с помощью CSS и JavaScript, а также примеры кода.

Метод 1: Псевдокласс CSS (:active)
Псевдокласс CSS :activeзапускается при нажатии кнопки. Мы можем использовать этот псевдокласс, чтобы изменить цвет границы кнопки. Вот пример:

.button:active {
  border-color: red;
}

Метод 2: прослушиватель событий JavaScript
Используя JavaScript, мы можем прикрепить прослушиватель событий к кнопке и изменить цвет ее границы при возникновении события щелчка. Вот пример использования простого JavaScript:

const button = document.querySelector('.button');
button.addEventListener('click', function() {
  this.style.borderColor = 'blue';
});

Метод 3: CSS-переходы с использованием JavaScript
В этом методе мы комбинируем CSS-переходы с JavaScript для анимации изменения цвета границы кнопки. Вот пример:

.button {
  transition: border-color 0.3s ease;
}
.button.clicked {
  border-color: green;
}

const button = document.querySelector('.button');
button.addEventListener('click', function() {
  this.classList.add('clicked');
});

Метод 4: CSS-анимация
CSS-анимация обеспечивает более сложные и настраиваемые эффекты. Мы можем создать анимацию ключевого кадра, чтобы изменить цвет границы кнопки при нажатии. Вот пример:

@keyframes colorChange {
  from {
    border-color: black;
  }
  to {
    border-color: yellow;
  }
}
.button {
  animation: colorChange 1s forwards;
}