Шаблон социальных кнопок для сайта HTML+CSS

Опубликовано: Понедельник, 26 Октябрь 2015

Вот так будут выглядить Ваши кнопки на сайте Картинка выглядит так:

Вы можете использовать данные материалы у себя на сайте. Не обижусь даже если не поставите ссылку на мой сайт. Всем добра!

 
Картинка, которая используется для соц. бара

sankt-video.ru

Код 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;}
 
Просмотров 2721
(1 like)
Последнее изменение Понедельник, 02 Октябрь 2017

Поделиться с другими

Рекомендуем также посмотреть


   
© Все права защищены. Видеосъёмка СПБ Sankt-video 2019