Кнопки с картинками внутри

Автор Тема: Кнопки с картинками внутри  (Прочитано 2389 раз)

Оффлайн REDFOXАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 13
  • Карма: 0
    • Просмотр профиля

Оффлайн REDFOXАвтор темы

  • Рекрут
  • *
Добрый день!
Нужна помощь с кнопками. Идея следующая: хочу создать кнопки на css такого формата ("картинка, текст ссылки" или "текст ссылки, картинка"), в качестве картинки, например, значок скачивания файла. Как создать и оформить кнопку в css я знаю, проблема исключительно с внедрением картинки через css.

Пытаюсь прописать все это к тегу "а" с определенным классом, но пока получилось только отдельно оформить кнопку и добавить в ссылку картинку:

<a href="#" class="#"> <img src="#"> текст ссылки</a>

Как прописать картинку именно через стили css?

Для примера, код css кнопки:
(нажмите чтобы показать/скрыть)


Оффлайн alexburn

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1056
  • Сообщений: 3375
  • Карма: 72
  • Пол: Мужской
  • Нужна прога для компа?
    • Просмотр профиля
    • Прикладные программы на заказ

Оффлайн alexburn

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (1, 100%)
    • СПАСИБО: 1056
    • Сообщений: 3375
    • Карма: 72
    • Пол: Мужской
    • Нужна прога для компа?
      • Просмотр профиля
      • Прикладные программы на заказ
Re: Кнопки с картинками внутри
« Ответ #1 : 17-08-2017, 15:18:34 »
backgroundimage ?

Оффлайн REDFOXАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 13
  • Карма: 0
    • Просмотр профиля

Оффлайн REDFOXАвтор темы

  • Рекрут
  • *
Re: Кнопки с картинками внутри
« Ответ #2 : 17-08-2017, 15:30:54 »
backgroundimage ?

Нет, пробовал, картинка вообще не появляется

Оффлайн tartaren

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 119
  • Сообщений: 390
  • Карма: 6
  • Награды SEO-специалист
    • Просмотр профиля

Оффлайн tartaren

  • Старожил
  • ****
Re: Кнопки с картинками внутри
« Ответ #3 : 17-08-2017, 15:32:56 »
Поддерживаю, сделайте у кнопок фоном те самые картинки:

.batton-br {
   background: url(путь к нужной картинке);
...
...
}

Оффлайн REDFOXАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 13
  • Карма: 0
    • Просмотр профиля

Оффлайн REDFOXАвтор темы

  • Рекрут
  • *
Re: Кнопки с картинками внутри
« Ответ #4 : 17-08-2017, 15:39:16 »
Поддерживаю, сделайте у кнопок фоном те самые картинки:

.batton-br {
   background: url(путь к нужной картинке);
...
...
}

Не получается. Может у меня руки из того самого места?!))
Делаю так:
(нажмите чтобы показать/скрыть)
Картинка не появляется, надпись тускнеет... пробовал без цвета (#0000FF), но тогда кнопка полностью пустая


Оффлайн tartaren

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 119
  • Сообщений: 390
  • Карма: 6
  • Награды SEO-специалист
    • Просмотр профиля

Оффлайн tartaren

  • Старожил
  • ****
Re: Кнопки с картинками внутри
« Ответ #5 : 17-08-2017, 15:41:55 »
Сокращённая запись background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Найдите в поиске и внимательно почитайте.

Оффлайн REDFOXАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 13
  • Карма: 0
    • Просмотр профиля

Оффлайн REDFOXАвтор темы

  • Рекрут
  • *
Re: Кнопки с картинками внутри
« Ответ #6 : 17-08-2017, 16:07:24 »
Сокращённая запись background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Найдите в поиске и внимательно почитайте.

Тоже не помогло, уже и размер картинки изменил, чтобы она в кнопку помещалась, но ее как не было внутри кнопки, так и нет... Проверил на тестовом сайте - результата тоже нет.

Оффлайн tartaren

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 119
  • Сообщений: 390
  • Карма: 6
  • Награды SEO-специалист
    • Просмотр профиля

Оффлайн tartaren

  • Старожил
  • ****
Re: Кнопки с картинками внутри
« Ответ #7 : 17-08-2017, 16:08:30 »
Можете дать ссылку на сайт?

Оффлайн REDFOXАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 1
  • Сообщений: 13
  • Карма: 0
    • Просмотр профиля

Оффлайн REDFOXАвтор темы

  • Рекрут
  • *
Re: Кнопки с картинками внутри
« Ответ #8 : 17-08-2017, 16:15:18 »
Можете дать ссылку на сайт?

http://teeest1.ucoz.net/load/sis_i/1-1-0-2


Оффлайн tartaren

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 119
  • Сообщений: 390
  • Карма: 6
  • Награды SEO-специалист
    • Просмотр профиля

Оффлайн tartaren

  • Старожил
  • ****
Re: Кнопки с картинками внутри
« Ответ #9 : 17-08-2017, 16:18:45 »
Уберите вот это:
    background-attachment: fixed;
    background-position: right center;
и посмотрите результат

Вообще конечно этот укоз ужасный и громкий ужас, имею в виду структуру HTML на указанной странице.
« Последнее редактирование: 17-08-2017, 16:24:11 от tartaren »


 

Похожие темы

  Тема / Автор Ответов Последний ответ
1 Ответов
1435 Просмотров
Последний ответ 20-02-2012, 05:57:06
от misecondi01
0 Ответов
874 Просмотров
Последний ответ 27-02-2012, 22:52:10
от Dolphinka
9 Ответов
3581 Просмотров
Последний ответ 14-10-2012, 14:08:07
от Rissen
1 Ответов
1019 Просмотров
Последний ответ 01-02-2014, 11:01:52
от vold57
4 Ответов
1210 Просмотров
Последний ответ 03-11-2015, 16:05:21
от Алина Шехова