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

@Ukon · Регистрация: 26.02.2014

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

Вот код

HTML5

1	<button class="btn btn-6 btn-6d">Выбор материалов</button>

CSS

.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, все-равно не помогло(

@Gleb111 · 14.04.2014, 13:42

Вам нужно заменить весь код css на

CSS

1 2	.btn { background-image: (нужная картинка.расширение);

@Ukon · 14.04.2014, 14:52 **[ТС]**

Зачем весь? Там указаны еще и стили, для кручения при наведении)

@Gleb111 · 14.04.2014, 18:18

CSS

.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;
}

@Ukon · 15.04.2014, 09:03 **[ТС]**

А разве перед путем картинки не нужно писать url?
ничего не получается.

BuPy7 · 15.04.2014, 09:16

CSS

1	background-image: url('image.png');

@Ukon · 15.04.2014, 09:25 **[ТС]**

А в HTML ничего менять не надо?

@Gleb111 · 15.04.2014, 13:18

Ничего не надо менять. Извиняюсь за то, что забыл указать url.

@Ukon · 15.04.2014, 13:21 **[ТС]**

Вписываю эту картинку, но с кнопкой ващпе никаких изменений...

@Gleb111 · 15.04.2014, 13:24

В таком случае вам нужно проворачивать все действия уже с картинкой. Для этого, как минимум, надо убрать коды касающиеся кнопки без картинки.

@Ukon · 15.04.2014, 13:53 **[ТС]**

Да, я поставил картинку через HTML, но хз как теперь задать ей тоже самое кручение)))

HTML5

1	<a href="http://www.******.ru"><img src="https://www.cyberforum.ru/images/button.png" "width=200″ "height=67″></a>

Подскажи, если знаешь)

@Ukon · 16.04.2014, 09:24 **[ТС]**

Спасибо) Сделал все через картинку) Теперь они красивенько выглядят)) Да еще и крутятся + работают как кнопки!!

@Ukon 7 / 7 / 2 Регистрация: 26.02.2014 Сообщений: 176
	16.04.2014, 09:24 [ТС]	12
	Спасибо) Сделал все через картинку) Теперь они красивенько выглядят)) Да еще и крутятся + работают как кнопки!! 0

@Ukon 7 / 7 / 2 Регистрация: 26.02.2014 Сообщений: 176
	14.04.2014, 14:52 [ТС]	3
	Зачем весь? Там указаны еще и стили, для кручения при наведении) 0

@Ukon 7 / 7 / 2 Регистрация: 26.02.2014 Сообщений: 176
	15.04.2014, 09:03 [ТС]	5
	А разве перед путем картинки не нужно писать url? ничего не получается. 0

@Ukon 7 / 7 / 2 Регистрация: 26.02.2014 Сообщений: 176
	15.04.2014, 09:25 [ТС]	7
	А в HTML ничего менять не надо? 0

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51
	15.04.2014, 13:18	8
	Ничего не надо менять. Извиняюсь за то, что забыл указать url. 0

@Ukon 7 / 7 / 2 Регистрация: 26.02.2014 Сообщений: 176
	15.04.2014, 13:21 [ТС]	9
	Вписываю эту картинку, но с кнопкой ващпе никаких изменений... 0

@Gleb111 1 / 1 / 0 Регистрация: 12.04.2014 Сообщений: 51
	15.04.2014, 13:24	10
	В таком случае вам нужно проворачивать все действия уже с картинкой. Для этого, как минимум, надо убрать коды касающиеся кнопки без картинки. 1

Опции темы