Картинка в
На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.
Связи
Разделы сайта
Популярное
- Уроки по HTML и CSS
- Руководство по флексбоксам
- HTML5 и CSS3 на примерах
- Руководство по JSON
- Как верстать на HTML5 и CSS3
- Продвинутые уроки по HTML и CSS
- Визуальное руководство по свойствам flexbox
- Создание первого приложения на Node
Помощь по сайту
Сайт WebReference.ru использует VPS от компании Beget.
Как создать кнопку с картинкой?
Ребята есть кнопка, и задний фон кнопки оранжевый и надо сделать так чтобы рядом с кнопкой была картинка «+» но что-то у меня не получается и так и сяк пробовал. Искал в интернете не нашел подходящих вариантов!
jsfiddle.net/au5umnjo
PS Прошу прощения за очень легкий вопрос.
- Вопрос задан более трёх лет назад
- 18520 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 5
Хангелды Илебаев @mahabatuly
Как сделать кнопку с картинкой в html
Для создания кнопки с картинкой в HTML можно использовать тег и атрибут background-image в CSS. Вот пример кода:
class="image-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) .
Как вставить картинку в кнопку
Если у Вас кнопка создана тегом , то есть отдельная статья «Как сделать input картинкой».
А в этой статье описано, как вставить картинку в button.
Чтобы вставить картинку в button, нужно поместить изображение внутрь . Есть еще вариант — воспользоваться CSS, но об этом ниже. Пример кода для добавления картинки в button в HTML:
При этом, по умолчанию, при наведении курсора на button в браузере курсор не меняет вид. Такое поведение обычно изменяют. Смотрите «Как изменить курсор при наведении на кнопку».
Добавление изображения просто с помощью тега это самый быстрый способ. Он работает безошибочно, но в настоящее время он не совсем правильный, особенно с точки зрения семантики. Как добавлять изображения на сайт правильно, читайте здесь «Как правильно вставить картинку в HTML».
Теперь о том, если Вам нужно добавить картинку в кнопку фоном, то есть через CSS. Обычно это делается через CSS-файл, но если Вы не знаете, что это, то можно прямо в HTML так:
Скопируйте: style=»background-image: url(image.png);».
CSS-свойство background-image добавляет изображение фоном. В url нужно указать путь до картинки.
Чтобы картинка не повторялась смотрите «Как сделать чтобы картинка не повторялась».
Чтобы задать размер картинки смотрите «Как изменить размер картинки».
Чтобы задать позицию изображения смотрите «Background-position в CSS — что это».