Loading Likes...

Представим ситуацию – есть кнопка “скачать программу” и она расположена на всех страницах сайта, но вдруг захотелось поставить рядом с ней картинку. А что, если это обычная ссылка с дивом и без li? Следовательно list-style-image не подойдет и в таком случае остается пенять лишь на background-image, позиционирование и repeat (повторения).

1

Допустим все требуемые кнопки-ссылки с дивом "smile" и ведут на сайт zavlekyxa.ru.

Изначально нужно сделать картинку при помощи фоторедактора с размерами 16px – 16px или больше, если кнопка планируется быть гигантской. Но главное соблюдать пропорции, которые обычно такие: 16px – 16px, 32px -32px, 64px – 64px.

Создание 16 px изображения

2

А далее изображение добавляется на WordPress сайт и адрес добавленной картинки присуждается диву "smile", о нём мы кстати говорили чуть выше.

3

Картинка в виде фона прокручивается на ссылке, но нужно прекратить повторение при помощи  background-repeat: no-repeat. Также необходимо расположить картинку либо с правой стороны от текста background-position: right center или с левой стороны от текста background-position: left center.

4

Остается лишь добавить отступы от текста (padding) и заметить, что фоновая картинка не реагирует на padding. Посему необходимо добавить отступы для картинки при помощи border-left или border-right (в зависимости от того, с какой стороны находится изображение).

Финишный код таков:

5

В качестве примерного результата получается следующее:

Текст рядом с картинкой

 

Особенно хорош сей вариант, если на страницах сайта находятся ссылки с определенным дивом или с другой подобной штукой. 

Если вам пригодился материал, то вы можете поделиться им со своими социальными друзьями. Ниже находятся социальные кнопки, так что удачи  :mrgreen: