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

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

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

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

Вот код

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

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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 01.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 31.01.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

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

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

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

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

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

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

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