Тёмные социальные кнопки для 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. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 2 | |
| |