3 menus de redes sociais com efeito CSS3

by: Unknown

Neste pequeno artigo irei disponibilizar 3 menus com botões de redes sociais bem legais para seu blog. O menu possui alguns efeitos em CSS3, bem como o efeito de rotação e opacidade. Apresentam botões das principais redes sociais da internet mais conhecidas até então, como o Facebook, Twitter e a mais nova rede social. Veja:

Para instalar um desses no seu blog, apenas copie um dos códigos abaixo com seus respectivos códigos. Depois vá em “Layout” –> “Adicionar um gadget” –> “HTML/Javascript” e cole-os, em seguida faça as devidas alterações "URL PERFIL TWITTER" , "URL PERFIL FACEBOOK" , "URL PERFIL GOOGLE PLUS" , "URL CANAL YOUTUBE".

<style>

.minhasredes1 {
padding: 15px;
}

.minhasredes1 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
opacity: 0.5;
}

.minhasredes1 a:hover {
opacity: 1;
}

.minhasredes1 img {
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
}
.minhasredes1 img:hover {
-webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(0px);
}

</style>

<style>

.minhasredes2 {

padding: 15px;

}

.minhasredes2 a {

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

opacity: 0.5;

}

.minhasredes2 a:hover {

opacity: 1;

}

.minhasredes2 img {

-webkit-transition:All 0.2s ease;

-moz-transition:All 0.2s ease;

}

.minhasredes2 img:hover {

-webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(0px);

}

</style>

<div class="minhasredes2">

<a href="URL PERFIL TWITTER" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Twitter-icon.png"/></a>

<a href="URL PERFIL FACEBOOK" title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Facebook-icon.png"/></a>

<a href="URL PERFIL GOOGLE PLUS" title="Me circule no Google Plus"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/Google-Plus-icon.png"/></a>

<a href="URL FEED" title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%202/RSS-icon.png"/></a>

</div>

<style>

.minhasredes3 {
padding: 15px;
}

.minhasredes3 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
opacity: 0.5;
}

.minhasredes3 a:hover {
opacity: 1;
}

.minhasredes3 img {
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
}

</style>

<div class="minhasredes3">
<a href="URL PERFIL TWITTER" title="Siga-me no Twitter"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/twitter-icon.png"/></a>
<a href="URL PERFIL FACEBOOK"title="Me adicione no Facebook"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/facebook-icon.png"/></a>
<a href="URL FEED"title="Assine nosso Feed"><img src="http://dl.dropbox.com/u/47734544/Icones/RS%203/rss-icon.png"/></a>
</div>

3 menus de redes sociais com efeito CSS3

BTN

BTN