» »

Круглые социальные кнопки сайта с эффектом


Круглые социальные кнопки сайта с эффектом

Много есть специальных онлайн ресурсов, где вы можете создать кнопки, но эти Круглые социальные кнопки сайта с эффектом будут работать у вас на портале автономно, а значит грузить сайт не будут. Их немного, что можно с уверенностью сказать, самые главные социальные сайты выведены будут. А значит как пользователи и гости могут заносить ваш сайт в свои аккаунты созданные. Не секрет, что теперь уже без них нельзя представить как полноценный сайт. И поэтому, идут кнопки скриптом отдельно, но в нашем случай собраны вместе. Кто понимает в css и фотошоп, тот может просто сделать их формат, как вам нужен, а это увеличить или уменьшить в размерах.

Код
<a href="ссылка" target="_blank" class="social-vk"></a> <a href="ссылка" target="_blank" class="social-ok"></a> <a href="ссылка" target="_blank" class="social-facebook"></a> <a href="ссылка" target="_blank" class="social-twitter"></a> <a href="ссылка" target="_blank" class="social-yandex"></a> <a href="ссылка" target="_blank" class="social-youtube"></a>


Стили:

Код
/* Соц. кнопки с форума uCoz */ .social-facebook {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') no-repeat;} .social-twitter {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -60px no-repeat;} .social-vk {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -120px no-repeat;} .social-yandex {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -180px no-repeat;} .social-youtube {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -240px no-repeat;} .social-ok {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -300px no-repeat;} .social-gl {display:inline-block;width:60px;height:60px;background:url('http://zornet.ru/SKRIPT/Menu-1/social-buttons.png') 0 -360px no-repeat;} .social-facebook:hover {background-position:-60px 0;} .social-twitter:hover {background-position:-60px -60px;} .social-vk:hover {background-position:-60px -120px;} .social-yandex:hover {background-position:-60px -180px;} .social-youtube:hover {background-position:-60px -240px;} .social-ok:hover {background-position:-58px -300px;} .social-gl:hover {background-position:-60px -360px;}


02.06.2015 Просмотров: 697 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
kredit-oformi
kredit-oformi 02.06.2015 22:531
0
неплохие на вид кнопочки
Kosten
Kosten 02.06.2015 22:572
0
Что есть то есть, мне кажется на твой ресурс отлично подойдут верх сайта, там место есть.
kredit-oformi
kredit-oformi 02.06.2015 23:423
0
Kosten, проверь плиз, вот только думаю главные оставить или в группы но на одноклассниках нет у меня группы
Kosten
Kosten 03.06.2015 00:094
0
kredit-oformi, как и говорил, отлично вписались кнопки в дизайн.
Kosten
Kosten 03.06.2015 00:125
0
kredit-oformi, у тебя кнопка и на ней написано "Зарегистрироваться" убери и напиши Регистрация. И тогда должна не за лазить на материал она.
kredit-oformi
kredit-oformi 03.06.2015 00:126
0
Kosten, а как незнаешь сделать чтобы пользователь поделился ссылкой или так просто оставить?
Kosten
Kosten 03.06.2015 00:177
0
kredit-oformi, там ссылки нужно прописывать. Вот только какие не знаю.
Kosten
Kosten 03.06.2015 00:218
0


Вот как кнопка смотрится, думаю намного лучше чем было.
vala
vala 08.06.2015 10:529
0
Красивые кнопки надо взять спасибо!
Kosten
Kosten 08.06.2015 11:3110
0
vala, но а почему, бы и нет, и на темный фон пойдут.
avatar