Как сделать кнопки социальных сетей с эффектом при наведении

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

Итак, добавляем в сайдбар или другие место по вашему усмотрению, в зависимости от макета вашего сайта, виджет "HTML/Javascript". Данный виджет будет выглядеть на вашем сайте приблизительно таким образом.

Для того, чтобы это получилось на вашем сайте необходимо скопировать выделенный жирным шрифтом код и добавить его в виджет:

<style>

.StarsBloggingSocialButtonsBorder {

margin:0 auto;

padding:5px;

width:auto;

border-radius:5px;

border: 1px #BBBBBB solid;

}

#bloggertrix-SexySocialButtons{

list-style:none;

text-decoration:none;

font-size:0.9em;

font-family:trebuchet ms,sans-serif;

}

#bloggertrix-SexySocialButtons a{

text-decoration:none;

font-family:trebuchet ms,sans-serif;

}

#bloggertrix-SexySocialButtons li{

position:relative;

height:38px;

cursor:pointer;

padding: 0 !important;

}

#bloggertrix-SexySocialButtons .facebook,

 .googleplus, .YouTube, .rss, .twitter{

position:relative;

z-index:5;

display:block;

float:none;

margin:5px 0 0;

width:210px;

height:38px;

border-radius:5px; background:

url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4

/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;

background-color:rgba(217,30,118,.42);

-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;

-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;

box-shadow:rgba(0,0,0,.28) 0 2px 3px;

color:#141414;

text-align:left;

text-indent:50px;

text-shadow:#333 0 1px 0;

white-space:nowrap;

line-height:32px;

-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;

-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;

-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;

-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;

transition:width .25s ease-in-out,background-color .25s ease-in-out;

-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;

}

#bloggertrix-SexySocialButtons li:after{

position:absolute;

top:0;

left:50px;

z-index:2;

display:block;

height:38px; color:#ffffff;

content:attr(data-alt);

line-height:32px;

}

#bloggertrix-SexySocialButtons .icon{

overflow:hidden;

color:#fafafa;

}

#bloggertrix-SexySocialButtons .facebook{

width:32px;

height:32px;

background-color:rgba(59,89,152,0.42);

background-position:0 0;

}

#bloggertrix-SexySocialButtons .twitter{

width:32px;

height:32px;

background-color:rgba(64,153,255,0.42);

background-position:0 -33px;

}

#bloggertrix-SexySocialButtons .googleplus{

width:32px;

height:32px;

background-color:rgba(228,69,36,0.42);

background-position:-3px -66px;

}

#bloggertrix-SexySocialButtons .YouTube{

width:32px;

height:32px;

background-color:rgba(174,45,39,0.42);

background-position:-2px -95px;

}

#bloggertrix-SexySocialButtons .rss{

width:32px;

height:32px;

background-color:rgba(255,102,0,0.42);

background-position:-3px -126px;

}

#bloggertrix-SexySocialButtons li:hover .icon,

.touch #bloggertrix-SexySocialButtons li .icon{

width:210px;

}

.touch #bloggertrix-SexySocialButtons li .facebook,

 #bloggertrix-SexySocialButtons li:hover .facebook{

background-color:rgba(59,89,152,1);

}

.touch #bloggertrix-SexySocialButtons li .twitter, 

#bloggertrix-SexySocialButtons li:hover .twitter{

background-color:rgba(64,153,255,1);

}

.touch #bloggertrix-SexySocialButtons li .googleplus, 

#bloggertrix-SexySocialButtons li:hover .googleplus{

background-color:rgba(228,69,36,1);

}

.touch #bloggertrix-SexySocialButtons li .YouTube, 

#bloggertrix-SexySocialButtons li:hover .YouTube{

background-color:rgba(174,45,39,1);

}

.touch #bloggertrix-SexySocialButtons li .rss,

 #bloggertrix-SexySocialButtons li:hover .rss{

background-color:rgba(255,102,0,1);

}

</style>
<div class="bloggertrixSocialButtonsBorder">

<ul id="bloggertrix-SexySocialButtons">

<li data-alt="Follow us on Facebook"><a class="icon facebook" 

href="https://www.facebook.com/bloggertrix">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" 

href="https://twitter.com/bloggertrix">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" 

href="https://plus.google.com/107955298793879607964">Follow us on Google+</a></li>

<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" 

href="https://youtube.com/Username">Subscribe us on YouTube</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" 

href="http://feeds.feedburner.com/bloggertrix">Subscribe with RSS</a></li></ul>

</div>

Сохраняем виджет и проверяем насколько корректно он отображается на сайте и работают  ли ссылки. Если все работает, то вам необходимо внести некоторые незначительные изменения . Для этого открываем редактор виджета и настраиваем его под себя.


1. В самом конце кода вы найдете ссылки на профили в разных социальных сетях - https://www.facebook.com/bloggertrix, https://plus.google.com/107955298793879607964 и так далее. Все ссылки нужно в обязательном порядке заменить на свои.

2. Крайне желательно для РуНета заменить текст "Follow us on" и другие на соответствующие понятные всем аналоги.

3. В коде виджета в начале идет блок разных стилей style, в нем можете отредактировать те или иные элементы, которые вас не устраивают. Если вы захотите изменить иконки сервисов какими - то другим социальными сетями - ищите в коде background:url, где имеется ссылка на картинку с иконками.