Как вставить картинку в кнопку CSS

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

.button {
  background-image: url("путь_к_изображению");
  background-repeat: no-repeat; /* Отключаем повторение изображения */
  background-position: center center; /* Располагаем изображение по центру кнопки */
  padding: 10px; /* Добавляем отступы вокруг текста */
  text-align: center; /* Выравниваем текст по центру */
}

Здесь мы используем свойство background-image, чтобы задать путь к изображению. Обратите внимание, что путь к изображению указывается в кавычках.

Чтобы изображение не повторялось, нужно установить значение свойства background-repeat равным no-repeat.

С помощью свойства background-position можно расположить изображение внутри кнопки по центру.

Для лучшего отображения текста на кнопке, добавим отступы (padding) и выравниваем текст по центру (text-align).

После применения этих свойств, кнопка будет отображаться с фоновым изображением. Конечно, можно дальше настраивать стили и добавлять другие свойства по нуждам дизайна.

реклама

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

реклама

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

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

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

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

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

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