Botões Redes Sociais com efeitos de transição CSS3

Desta vez vou dar widgets de redes sociais ou botões com efeitos de transição. Como sabemos que o crescimento da mídia social está crescendo rapidamente e é amplamente utilizado como uma maneira de aumentar os visitantes de blogs que fazemos. Assim, com um botão de vista interessante que vai ser capaz de aumentar seguidor (twitter) ou a Fan Page como (FB) do nosso blog. Bem logo com isso.

Veja a demo

HTML

Aqui está a estrutura HTML do botão. Eu dividi-lo em div para tornar mais fácil para aumentar / diminuir botões que você deseja por favor excluir a seção "<div id="mkrbutton"> .............. </ div>". Por exemplo, para remover o botão Youtube retire <div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>. 

<div id="mkrbutton"><a href="#" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz rss"><span>RSS</span></a></div>Copy

Transições CSS e CSS3

Abaixo é o código CSS usado para criar o efeito sobre este botão. CSS3 é utilizado para fornecer o efeito utilizando a facilidade de transição de saída é a largura. Para mais detalhes, consulte o código abaixo.

#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxfWxfogClietSAn196lBLCrZyglHVED4jpHbXi9Fh1zZgc3-seOx4_JNi4jgaLK_EmPmfgP4a4Hx7kXNgI3T0OAflI5k6eJYZFPeQWUxT-MErXYuHBgZeMjo5zchpSCbZ8a_crqBn6Q/s1600/blsocial12.png') 0 0 no-repeat;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
display:block;
color:#212121;
float:none;
height:48px;
width: 48px;
line-height:48px;
margin:10px auto 0;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out;
-ms-transition:width .25s ease-in-out;
-moz-transition:width .25s ease-in-out;
-o-transition:width .25s ease-in-out;
transition:width .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;}
#mkrbutton a span {display:none;}
#mkrbutton:hover a span {display:inline;}
#mkrbutton a span {font-size:1.4em;}
#mkrbutton:hover .iconz {width:250px;}
#mkrbutton .fb {background-position: 0 -384px;}
#mkrbutton .twiter {background-position: 0 -432px;}
#mkrbutton .google {background-position: 0 -480px;}
#mkrbutton .pint {background-position: 0 -528px;}
#mkrbutton .linkedin {background-position: 0 -576px;}
#mkrbutton .devart {background-position: 0 -624px;}
#mkrbutton .ytube {background-position: 0 -672px;}
#mkrbutton .rss {background-position: 0 -720px;}
#mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;}
#mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}
#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;}
#mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;}
#mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;}
#mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;}
#mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;}
#mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}Copy

INSTALAÇÃO NO BLOGSPOT

Primeiro, vá para o layout da página, clicando no menu de layout :

Ir para layout de página

Adicione um elemento de página HTML / JavaScript , e em seguida, copie o código e cole sob a forma:

<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxfWxfogClietSAn196lBLCrZyglHVED4jpHbXi9Fh1zZgc3-seOx4_JNi4jgaLK_EmPmfgP4a4Hx7kXNgI3T0OAflI5k6eJYZFPeQWUxT-MErXYuHBgZeMjo5zchpSCbZ8a_crqBn6Q/s1600/blsocial12.png') 0 0 no-repeat;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
display:block;
color:#212121;
float:none;
height:48px;
width: 48px;
line-height:48px;
margin:10px auto 0;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out;
-ms-transition:width .25s ease-in-out;
-moz-transition:width .25s ease-in-out;
-o-transition:width .25s ease-in-out;
transition:width .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;}
#mkrbutton a span {display:none;}
#mkrbutton:hover a span {display:inline;}
#mkrbutton a span {font-size:1.4em;}
#mkrbutton:hover .iconz {width:250px;}
#mkrbutton .fb {background-position: 0 -384px;}
#mkrbutton .twiter {background-position: 0 -432px;}
#mkrbutton .google {background-position: 0 -480px;}
#mkrbutton .pint {background-position: 0 -528px;}
#mkrbutton .linkedin {background-position: 0 -576px;}
#mkrbutton .devart {background-position: 0 -624px;}
#mkrbutton .ytube {background-position: 0 -672px;}
#mkrbutton .rss {background-position: 0 -720px;}
#mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;}
#mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}
#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;}
#mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;}
#mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;}
#mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;}
#mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;}
#mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}
</style>

<div id="mkrbutton"><a href="#" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz rss"><span>RSS</span></a></div>Copy

Veja a demo

Nota: A largura do tamanho certo para a aplicação da barra lateral é 300px. Para personalizar o código na barra lateral encontre este código # mkrbutton: hover Iconz. {Width: 250px;} e altere seu valor para a largura para caber na sua sidebar (barra lateral).

Fonte: Mkr-site.blogspot.com

Share This :