terça-feira, 1 de novembro de 2011

Botões de redes sociais para seguir

Redes sociais Vertical Olá meu queridos leitores, hoje estarei disponibilizando para vocês um código de pequenos botões em CSS com HTML com efeito hover. Existem 3 botões das redes sociais mais conhecidas atém então, do facebook, twitter e do google + que, cuja função, leva o visitante até a página do perfil de sua rede.

Clique aqui para ver uma demonstração

Abaixo estão os códigos para adquirir os botões que você pode estar escolhendo na vertical ou na horizontal. Para colocar no seu blog apenas copie um dos códigos abaixo, faça o login no seu blog, clique na guia “Layout” –> “Adicionar um gadget” –> “HTML/Javascript” e cole o código. Depois faça as modificações, alterando as partes em vermelho pela URL do seu perfil. Após isso, salve.Redes sociais Horizontal

<Style>

.button{ 
    margin: 8px; 
}

.button a{ 
  text-decoration: none; 
    color:#333333; 
    font-family:font-family: 'Arvo', arial, serif;; 
    font-size:16px; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */ 
    background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    -moz-box-shadow: 0 3px 4px -1px #464646; 
    -webkit-box-shadow: 0 3px 4px -1px #464646;
    box-shadow: 0 3px 4px -1px #464646; 
    padding: 6px 12px; 
}

.button a:hover, .button a:focus{ 
    background: #dfdfdf; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */ 
    -moz-box-shadow: 0 1px 1px 0 #666666; 
    -webkit-box-shadow: 0 1px 1px 0 #666666; 
    box-shadow: 0 1px 1px 0 #666666; 

.button a:focus{ 
    -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
    -webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
    box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
}

.button a > img{ 
    padding-right: 8px; 
    position: relative; 
    top: 2px; 
}

</style>
<div class="container"> 
        <span class="button fb"> 
            <a href="URL PERFIL FACEBOOK"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Facebook-icon.png" alt="">Facebook</a> 
        </span> 
        <span class="button twit"> 
            <a href="URL PERFIL TWITTER"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Twitter-icon.png" alt="">Twitter</a> 
        </span> 
        <span class="button mail"> 
            <a href="URL PERFIL GOOGLE +"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Google-Plus-icon.png" alt="">Google +</a> 
        </span> 
    </div>

Redes sociais Vertical

<Style>

.button{ 
    margin: 8px; 
}

.button a{ 
  text-decoration: none; 
    color:#333333; 
    font-family:font-family: 'Arvo', arial, serif;; 
    font-size:16px; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */ 
    background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    -moz-box-shadow: 0 3px 4px -1px #464646; 
    -webkit-box-shadow: 0 3px 4px -1px #464646;
    box-shadow: 0 3px 4px -1px #464646; 
    padding: 6px 12px; 
}

.button a:hover, .button a:focus{ 
    background: #dfdfdf; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */ 
    -moz-box-shadow: 0 1px 1px 0 #666666; 
    -webkit-box-shadow: 0 1px 1px 0 #666666; 
    box-shadow: 0 1px 1px 0 #666666; 

.button a:focus{ 
    -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
    -webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
    box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666; 
}

.button a > img{ 
    padding-right: 8px; 
    position: relative; 
    top: 2px; 
}

</style>
<div class="container"> 
        <span class="button fb"> 
            <a href="URL PERFIL FACEBOOK"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Facebook-icon.png" alt="">Facebook</a> 
        </span><p/> 
        <span class="button twit"> 
            <a href="URL PERFIL TWITTER"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Twitter-icon.png" alt="">Twitter</a> 
        </span><p/> 
        <span class="button mail"> 
            <a href="URL PERFIL GOOGLE +"><img src="http://dl.dropbox.com/u/47734544/Redes%20Sociais/Google-Plus-icon.png" alt="">Google +</a> 
        </span> 
    </div>

Fonte: webdesign.tutsplus.com

Marcadores: , , , , , , ,