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

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

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

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

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

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

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

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

mahabatuly

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

Картинка в

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

Связи

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

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

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

Как сделать кнопку на сайте ссылкой

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

body> . a href value">URL">img src value">button.jpg">a> . body>

Вот во что он превращается на странице сайта:

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега и :

body> . form> input type value">button" value value">Просто кнопка" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" onclick js">javascript:window.location='URL2'"/> form> . body>

Вот как это примерно будет выглядеть на странице:

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

head> style> .btn < //Задание общего стиля для кнопки height:30px; border-color:#c2e254 #9bb838 #9bb838 #c2e254; border-style:solid; border-width:1px; background:#c2e254; cursor:pointer; > .btn:hover < //Стиль кнопки при новедении на него курсора border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66; border-style:solid; border-width:1px; background:#FFFF99; > .btn:focus < //Стиль кнопки, когда она в фокусе background:#ddd; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > .btn:active < //Стиль кнопки при нажатии background:#ff0000; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > style> head> body> form> input type value">button" value value">Просто кнопка" class value">btn" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" class value">btn" onclick js">javascript:window.location='URL2'"/> form> body>

После этого кнопка будет выглядеть следующим образом на странице:

Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег .