Как в кнопку добавить картинку css

Картинка в

На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.

Связи

Разделы сайта

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Как сделать кнопку с картинкой в 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) .

Как создать кнопку с картинкой?

Ребята есть кнопка, и задний фон кнопки оранжевый и надо сделать так чтобы рядом с кнопкой была картинка «+» но что-то у меня не получается и так и сяк пробовал. Искал в интернете не нашел подходящих вариантов!
jsfiddle.net/au5umnjo

PS Прошу прощения за очень легкий вопрос.

Вопрос задан более трёх лет назад
18721 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 5

mahabatuly

Хангелды Илебаев @mahabatuly

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

Здравствуйте. Как можно сделать, чтобы вместо невзрачной кнопки типа submit в форме была картинка, но функция кнопки та же?

Отслеживать
задан 4 июл 2012 в 13:01
Pavlik290592 Pavlik290592
224 3 3 золотых знака 10 10 серебряных знаков 22 22 бронзовых знака

6 ответов 6

Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 4 июл 2012 в 13:06
2,828 14 14 серебряных знаков 18 18 бронзовых знаков
Уже разобрался, но все равно спасибо.
4 июл 2012 в 13:08
Отслеживать
ответ дан 4 июл 2012 в 15:02
886 14 14 серебряных знаков 36 36 бронзовых знаков
Соррь не заметил ответ выше. Используй background-image и всё будет гуд.
4 июл 2012 в 15:02

Отслеживать
ответ дан 4 июл 2012 в 18:26
6,904 2 2 золотых знака 27 27 серебряных знаков 57 57 бронзовых знаков

Отслеживать
ответ дан 4 июл 2012 в 13:09
3,234 13 13 серебряных знаков 11 11 бронзовых знаков

В css это можно сделать так:

input[type="submit"]

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 5 июл 2012 в 2:24
Роман Соколов Роман Соколов
629 3 3 золотых знака 20 20 серебряных знаков 49 49 бронзовых знаков

попробуй так: src=»img/bg.gif»

Отслеживать
1,735 9 9 золотых знаков 19 19 серебряных знаков 28 28 бронзовых знаков
ответ дан 23 июл 2016 в 10:15
Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение?
27 июл 2016 в 10:38
И куда автор вопроса должен вставлять этот фрагмент?
11 мар 2017 в 12:57

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.