Вот так будут выглядить Ваши кнопки на сайте Картинка выглядит так:
Вы можете использовать данные материалы у себя на сайте. Не обижусь даже если не поставите ссылку на мой сайт. Всем добра!
Код HTML
<div class="socmedia"> <a href="http://vk.com/sanktvideo" target="_blank"><span class="soc_vk"> </span></a> <a href="https://www.facebook.com/sanktvideo" target="_blank"><span class="soc_fb"> </span></a> <a href="https://twitter.com/AR_Ener" target="_blank"><span class="soc_tw"> </span></a> <a href="https://instagram.com/sankt_video.ru" target="_blank"><span class="soc_inst"> </span></a> <a href="https://www.youtube.com/channel/UCJPE5B-b0rip4qu6brGsN3g" target="_blank"><span class="soc_tube"> </span></a> <a href="https://plus.google.com/+SanktvideoRu1" target="_blank"><span class="soc_ok"> </span></a>
Код CSS
clr {clear:both;} .code {border: 1px solid #ccc; border-radius:3px; width:800px; padding:10px; background:#eee;} .socmedia {padding:5px;} .soc_vk { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -144px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_vk:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -144px -33px; width:36px; min-height:32px;} .soc_fb { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat 0px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_fb:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat 0px -33px; width:36px; min-height:32px;} .soc_tw { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -37px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_tw:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -37px -33px; width:36px; min-height:32px;} .soc_inst { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -73px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_inst:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -73px -33px; width:36px; min-height:32px;} .soc_tube { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -109px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_tube:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -109px -33px; width:36px; min-height:32px;} .soc_ok { background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -182px 0px; width:36px; min-height:33px; display:block; float:left;} .soc_ok:hover{ background:url('http://www.sankt-video.ru/images/icons/soc_icons.png') no-repeat -182px -33px; width:37px; min-height:32px;}