Как сделать кнопку с картинкой в 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) .
Как сделать кнопку типа 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 серебряных знаков 35 35 бронзовых знаков
Соррь не заметил ответ выше. Используй background-image и всё будет гуд.
4 июл 2012 в 15:02
Отслеживать
ответ дан 4 июл 2012 в 18:26
6,894 2 2 золотых знака 26 26 серебряных знаков 56 56 бронзовых знаков
Отслеживать
ответ дан 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,745 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.
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как создать кнопку с картинкой?
Ребята есть кнопка, и задний фон кнопки оранжевый и надо сделать так чтобы рядом с кнопкой была картинка «+» но что-то у меня не получается и так и сяк пробовал. Искал в интернете не нашел подходящих вариантов!
jsfiddle.net/au5umnjo
PS Прошу прощения за очень легкий вопрос.
- Вопрос задан более трёх лет назад
- 18342 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 5
Хангелды Илебаев @mahabatuly
Как сделать картинки кнопки css
Написать в поддержку
Помощь онлайн
Проверить домен
Войти Валюта:
CSS: создание кнопки
14 июня
12162
Комментариев: 0
О том, как создать кнопку в HTML, мы уже рассказывали. Теперь же рассмотрим, как это сделать при помощи таблицы стилей.
Для создания простой кнопки используйте тег :
height:60px;
border-color:#000080 #6A5ACD #8470FF #0000FF;
border-style:solid;
border-width:5px;
background:#4682B4;
cursor:pointer;
Кнопка в браузере:
Рассмотрим таблицу стилей, в которой прописаны эффекты наведения на кнопку, где :hover отвечает за отображение кнопки при наведении, :active 一 при нажатии, а :focus 一 после нажатия:
border-color:#7CFC00 #7CFC00 #7CFC00 #7CFC00;
border-style:solid;
border-width:5px;
background:#FFFF99;
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:5px;
background:#228B22;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:5px;
Кнопка в браузере:
Также рекомендуем почитать:
CSS: стилизация цитат Как подключить CSS к HTML CSS: свойства шрифта CSS: текстовые эффекты CSS: свойства цвета и фона CSS: создание горизонтального меню CSS: работа с блоками
- Блог
- Хостинг, домены, мировые новости, обзоры ПО
- Рейтинги, обзоры, отзывы
- Наши новости, акции, нововведения
- Руководства, статьи, инструкции
- RSS
Популярное в категории
Июнь
77783
Июнь
68398
Октябрь
56095
Март
44444
Сентябрь
37641