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

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

  • автор:

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

Вставить картинку на кнопку

Author24 — интернет-сервис помощи студентам

HTML — Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на.

Как в html вставить 2-картинку на 1-картинку.
Если 1-картинка не должна быть фоновая. пожалуйста поподробней.

Поставить картинку на кнопку
Ребят, есть кнопочка, а хочется, чтобы выглядела не как кнопка, а картинка) Вот код<button.

Вставить картинку в код
Подскажите как вставить картинку вот в это код за место 16+ ? <p><?php bloginfo(); ?> &copy;.

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

Картинка в

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

Связи

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

Популярное

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

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

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

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

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