» »

Тёмные социальные кнопки для uCoz

Тёмные социальные кнопки для uCoz

Красивые тёмные социальные кнопки для сайта, данные кнопки подойду для тёмных сайтов. Ну при смене самих кнопок, можно поставить и на светлые интернет ресурсы. Данные кнопки специально для системы uCoz, которые будут по своей работе также делать посты в социальных площадках.

Нужно скачать архив, который идет с материалом и разместить его файловом менеджере портала.

Верхняя или нижняя часть сайта:

Код
<div class="socialLink"><ul id="menu-sotsialnye-ssylki" class=""><li id="menu-item-21192" class="rss menu-item menu-item-type-custom menu-item-object-custom menu-item-21192"><a title="RSS" target="_blank" href="#">RSS</a></li>  
<li id="menu-item-21193" class="vk menu-item menu-item-type-custom menu-item-object-custom menu-item-21193"><a title="ВКонтакте" target="_blank" href="#">ВКонтакте</a></li>  
<li id="menu-item-21194" class="youtube menu-item menu-item-type-custom menu-item-object-custom menu-item-21194"><a title="YouTube" target="_blank" href="#">YouTube</a></li>  
<li id="menu-item-21195" class="twitter menu-item menu-item-type-custom menu-item-object-custom menu-item-21195"><a title="Twitter" target="_blank" href="#">Twitter</a></li>  
<li id="menu-item-21196" class="steam menu-item menu-item-type-custom menu-item-object-custom menu-item-21196"><a title="Steam" target="_blank" href="#">Steam</a></li>  
</ul></div>


Css:

Код
.socialLink {  
  float: left;  
}  
.socialLink ul {  
  list-style: none;  
  padding: 2px 0 0 31px;  
  margin: 0;  
}  
.socialLink li {  
  display: inline-block;  
  vertical-align: middle;  
  border-right: 1px solid #4c4c4c;  
  padding: 4px 10px 4px 0;  
  margin: 0 0 0 5px;  
}  
.socialLink li a:hover {  
  -webkit-transform: scale(1.2);  
  -moz-transform: scale(1.2);  
  -ms-transform: scale(1.2);  
  -o-transform: scale(1.2);  
  transform: scale(1.2);  
  -webkit-transition-property: -webkit-transform;  
  -moz-transition-property: -moz-transform;  
  transition-property: transform;  
  -webkit-transition-duration: 150ms;  
  -moz-transition-duration: 150ms;  
  transition-duration: 150ms;  
}  
.socialLink li:last-child {  
  border: none;  
}  
.socialLink a {  
  display: block;  
  font-size: 0;  
  -webkit-font-smoothing: antialiased;  
}  
.socialLink a:hover {  

}  
.socialLink a:before {  
  content: "";  
  display: inline-block;  
  vertical-align: middle;  
  background-repeat: no-repeat;  
}  
.socialLink:hover:before {  
  color: #519e65;  
}  
.socialLink .rss a:before {  
  background: url(/wp-content/themes/images/svg/rss.svg);  
  width: 17px;  
  height: 17px;  
  background-size: contain;  
}  
.socialLink .vk a:before {  
  background: url(/wp-content/themes/images/svg/vk.svg);  
  width: 17px;  
  height: 17px;  
  background-size: contain;  
}  
.socialLink .youtube a:before {  
  background: url(/wp-content/themes/images/svg/youtube.svg);  
  width: 17px;  
  height: 17px;  
  background-size: contain;  
}  
.socialLink .twitter a:before {  
  background: url(/wp-content/themes/images/svg/twitter.svg);  
  width: 17px;  
  height: 17px;  
  background-size: contain;  
}  
.socialLink .steam a:before {  
  background: url(/wp-content/themes/images/svg/steam.svg);  
  width: 17px;  
  height: 17px;  
  background-size: contain;  
}


PS - кнопки социального направление безусловно можно считать или учитывать как внешнее оптимизация.

(rip Бармен) - он же JoniDen.
20.01.2017 Загрузок: 2 Просмотров: 491 Комментарий: (2)

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

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

Комментарий: 2
Сопрано
Сопрано 20.01.2017 19:461
0
Как видно на игровой сайт эти социальные кнопки.
Kosten
Kosten 20.01.2017 20:542
0
Вот под темный дизайн эти кнопки дольше подойдут - чем на светлый.
avatar