Как в кнопку добавить картинку css
Перейти к содержимому

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

  • автор:

Картинка в

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

Связи

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

Популярное

  • Уроки по HTML и CSS
  • Руководство по флексбоксам
  • HTML5 и CSS3 на примерах
  • Руководство по JSON
  • Как верстать на HTML5 и CSS3
  • Продвинутые уроки по HTML и CSS
  • Визуальное руководство по свойствам flexbox
  • Создание первого приложения на Node

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

Сайт 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) .

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

6feb5f9deb04.png

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

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

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

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

Решения вопроса 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *