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

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

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

В данном примере мы создаем кнопку с классом "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

Картинку в кнопку вставляют тегом <img> внутри <button>:

<button class="btn" type="button">
  <img src="cart.svg" alt="" width="20" height="20">
  В корзину
</button>

inline-flex и align-items: center ставят иконку и текст в ряд по центру. У иконки рядом с текстом alt="": текст кнопки уже объясняет действие.

Кнопка только из картинки

<button class="icon-btn" type="button" aria-label="Закрыть">
  <img src="close.svg" alt="">
</button>

Без текста кнопке нужен aria-label: его прочитают программы экранного доступа.

Картинка фоном кнопки

.play {
  width: 64px;
  height: 64px;
  border: none;
  background: url("play.png") center / contain no-repeat;
  cursor: pointer;
}

Фон подходит для декоративных кнопок. Размер кнопки задайте явно: под фоновую картинку кнопка не растягивается.

Картинка-ссылка

Для перехода на другую страницу по клику используйте ссылку <a>:

<a href="/courses">
  <img src="banner.jpg" alt="Все курсы Хекслета">
</a>

<button> выполняет действие на странице: открывает окно, отправляет форму. <a> ведёт на адрес.

Кнопка-картинка в форме

<form action="/search">
  <input name="q">
  <input type="image" src="search.png" alt="Найти" width="24" height="24">
</form>

<input type="image"> отправляет форму по клику на картинку.

Эффект при наведении

.icon-btn:hover img {
  opacity: 0.7;
}

.icon-btn:focus-visible {
  outline: 2px solid #0d6efd;
}

:focus-visible показывает рамку, когда на кнопку перешли клавишей Tab.

Кнопки, формы и иконки разбирают на курсе «Профессиональная верстка».