7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
1

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

14.04.2014, 12:13. Показов 15433. Ответов 11
Метки нет (Все метки)

Ребят, есть кнопочка, а хочется, чтобы выглядела не как кнопка, а картинка)

Вот код
HTML5
1
<button class="btn btn-6 btn-6d">Выбор материалов</button>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.btn {
  position: relative;
  z-index: 2;
  background: #808991;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 20px;
  border: 4px ridge black;
  cursor: pointer;
transition: 0.3s linear;
}
.btn-6d:hover {
 background: transparent;
 color: #226fbe;
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
transition: 0.3s linear;
}
В общем как сделать, чтобы кнопка стала картинкой, но с теми же свойствами?

Добавлено через 1 час 43 минуты
Пытался менять background на background-image, все-равно не помогло(
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.04.2014, 12:13
Ответы с готовыми решениями:

Подстройка размера картинки под разрешение экрана (как поставить картинку по середине, чтобы была, я не знаю уже((( подскажите пож куда что поставить
HTML-код: &lt;table id=&quot;headerTb&quot; width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;&lt;tr&gt; ...

Как поставить на фон картинку?
Как можно поставить на фон картинку? если картинка находится на рабочем столе в папке. можете...

Как правильно поставить картинку
Здраствуйте, я только начал изучать html и кароч надо РЯДОМ с стихом поставить картинку , а она у...

Как поставить картинку на фон.
http://htmlworker.ru/portfolio/fish_verstka/index.html вот сайт, интересно как делается картинка на...

11
1 / 1 / 0
Регистрация: 12.04.2014
Сообщений: 51
14.04.2014, 13:42 2
Вам нужно заменить весь код css на

CSS
1
2
.btn {
background-image: (нужная картинка.расширение);
0
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
14.04.2014, 14:52  [ТС] 3
Зачем весь? Там указаны еще и стили, для кручения при наведении)
0
1 / 1 / 0
Регистрация: 12.04.2014
Сообщений: 51
14.04.2014, 18:18 4
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.btn {
  background-image: (нужная картинка.расширение);
  position: relative;
  z-index: 2;
  background: #808991;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 20px;
  border: 4px ridge black;
  cursor: pointer;
transition: 0.3s linear;
}
.btn-6d:hover {
 background: transparent;
 color: #226fbe;
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
transition: 0.3s linear;
}
0
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
15.04.2014, 09:03  [ТС] 5
А разве перед путем картинки не нужно писать url?
ничего не получается.
0
Нет ТЗ - давай досвидания
746 / 377 / 64
Регистрация: 01.12.2011
Сообщений: 2,250
15.04.2014, 09:16 6
CSS
1
background-image: url('image.png');
0
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
15.04.2014, 09:25  [ТС] 7
А в HTML ничего менять не надо?
0
1 / 1 / 0
Регистрация: 12.04.2014
Сообщений: 51
15.04.2014, 13:18 8
Ничего не надо менять. Извиняюсь за то, что забыл указать url.
0
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
15.04.2014, 13:21  [ТС] 9
Вписываю эту картинку, но с кнопкой ващпе никаких изменений...
0
1 / 1 / 0
Регистрация: 12.04.2014
Сообщений: 51
15.04.2014, 13:24 10
В таком случае вам нужно проворачивать все действия уже с картинкой. Для этого, как минимум, надо убрать коды касающиеся кнопки без картинки.
1
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
15.04.2014, 13:53  [ТС] 11
Да, я поставил картинку через HTML, но хз как теперь задать ей тоже самое кручение)))

HTML5
1
<a href="http://www.******.ru"><img src="https://www.cyberforum.ru/images/button.png"  "width=200″ "height=67″></a>
Подскажи, если знаешь)
0
7 / 7 / 2
Регистрация: 26.02.2014
Сообщений: 176
16.04.2014, 09:24  [ТС] 12
Спасибо) Сделал все через картинку) Теперь они красивенько выглядят)) Да еще и крутятся + работают как кнопки!!
Поставить картинку на кнопку
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.04.2014, 09:24
Помогаю со студенческими работами здесь

Как поставить картинку на место?
Добрый день. Съехала вниз картинка врача в разделе Специалисты. Кто может помочь? Спасибо...

Как поставить картинку на передний фон?
Здравствуйте, подскажите как на сайте http://www.test.nemogy.ru верхнюю новогоднюю картинку...

Как поставить на задний фон картинку
Собственно вопрос в теме... Пробовал так css body { background-image: url (&quot;img\bg.jpg&quot;); }...

Как поставить вместо фона картинку
Здравствуйте, требуется помощь Есть сайт на вордпресс, хочу поставить бекграунд картинку, но не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru