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

Для создания кнопки с картинкой в HTML можно использовать тег <button> и атрибут background-image в CSS. Вот пример кода:

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

.image-button {
  width: 100px;
  height: 50px;
  border: none;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

В данном примере мы создаем кнопку с классом "image-button". Задаем ей ширину и высоту, убираем границу и задаем фоновую картинку с помощью атрибута background-image. Картинка будет растянута на всю площадь кнопки благодаря свойству background-size: cover;.

Также можно добавить эффекты при наведении или клике на кнопку с помощью псевдоклассов :hover и :active:

.image-button:hover {
  opacity: 0.8;
}

.image-button:active {
  transform: scale(0.95);
}

В данном примере при наведении на кнопку уменьшается прозрачность до 80% с помощью свойства opacity, а при клике на кнопку она уменьшается на 5% с помощью свойства transform: scale(0.95).

enter link description here