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

Замена button type=»button» на картинку

Проще говоря — есть стандартная кнопка — button type=»button» которую нужно заменить на картинку. Сначала думал, что не сложно, теперь. ) Подскажите, пожалуйста, способ решения проблемы.

Отслеживать
задан 1 дек 2011 в 5:57
Богдан Остапчук Богдан Остапчук
301 3 3 золотых знака 7 7 серебряных знаков 20 20 бронзовых знаков
А в чем проблемы (если можно, то с примером)
1 дек 2011 в 6:30
Спасибо за помощь — все решилось. Просто изначально неправильно начинал делать, теперь же все ясно.
1 дек 2011 в 6:36
А как привязать ссылку без CSS&
7 ноя 2019 в 17:46

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Есть , в нем можно использовать , например:

Отслеживать
ответ дан 1 дек 2011 в 6:28
chernomyrdin chernomyrdin
4,188 15 15 серебряных знаков 16 16 бронзовых знаков

Можно и так, но через стили будет универсальнее, т.к. оформление отделено от разметки. А во-вторых, можно добавить дополнительные фичи, например изменение картинки при наведении или нажатии.

1 дек 2011 в 6:38

А так не работает?

input[type="button"]

Отслеживать
ответ дан 1 дек 2011 в 6:11
invincible invincible
1,900 12 12 серебряных знаков 13 13 бронзовых знаков

Вот еще примерчик, для наглядности преимущества реализации через таблицу стилей: jsfiddle.net/invincible/zfhrP/2

1 дек 2011 в 6:48

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать кнопку с картинкой в 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 Прошу прощения за очень легкий вопрос.

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

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

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

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

mahabatuly

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

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

Есть два блока, в них картинка, текст и кнопка. Нужно по клику на кнопке выводить в другом диве текст и картинку, как бы клонируя блок,по которому был клик (но без кнопки). Текст передаю с помощью innerHTML метода, картинку не могу передать. Помогите передать картинку.

 1
  
 2

Вопрос задан 20 янв. 2023
231 просмотр