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

Метод 1: свойство CSS Filter
Свойство CSS filterпозволяет применять различные визуальные эффекты, включая изменение цвета изображения. Вот пример:

<button class="image-button">
  <img src="icon.png" alt="Icon" class="icon">
</button>

.icon {
  filter: invert(53%) sepia(100%) saturate(7458%) hue-rotate(187deg) brightness(91%) contrast(98%);
}

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

<button class="image-button">
  <svg class="icon" viewBox="0 0 24 24">
    <path fill="#FF0000" d="M12 0C8.7 0 6 2.7 6 6c0 2.8 5.8 10.6 5.8 10.6s5.8-7.8 5.8-10.6c0-3.3-2.7-6-6-6zm0 8.7c-1.6 0-2.9-1.3-2.9-2.9S10.4 2.9 12 2.9 14.9 4.2 14.9 6s-1.3 2.9-2.9 2.9z"/>
  </svg>
</button>

Метод 3: фоновое изображение CSS
Вы можете изменить фоновое изображение кнопки на модифицированную версию значка. Вот пример:

<button class="image-button"></button>

.image-button {
  width: 32px;
  height: 32px;
  background-image: url('icon.png');
  background-color: #FF0000;
  background-repeat: no-repeat;
  background-position: center;
}

Метод 4: псевдоэлементы CSS
Используя псевдоэлементы, такие как ::beforeили ::after, вы можете вставить значок и отдельно стилизовать его. Вот пример:

<button class="image-button"></button>

.image-button::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('icon.png');
  background-color: #FF0000;
  background-repeat: no-repeat;
  background-position: center;
}

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

<button class="image-button">
  <img src="icon.png" alt="Icon" id="icon">
</button>

const icon = document.getElementById("icon");
icon.style.filter = "invert(53%) sepia(100%) saturate(7458%) hue-rotate(187deg) brightness(91%) contrast(98%)";

Настройка цвета значка кнопки с изображением может значительно повысить визуальную привлекательность вашего веб-приложения. Используя фильтры CSS, манипуляции с SVG, фоновые изображения, псевдоэлементы или JavaScript, вы можете легко добиться этого эффекта. Поэкспериментируйте с этими методами, чтобы найти тот, который лучше всего соответствует требованиям вашего проекта.