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: , , , , , , ,

2 Comentários:

Às 1 de novembro de 2011 10:46 , Blogger @ArielFN disse...

Eii arruma o link vc pode ter colocado o html na pasta publico mais errou no link que devia copiar!! vc deve ter posto o de vc baixar, vc tem que colokar o link public mano =D

 
Às 4 de novembro de 2011 12:19 , Blogger Bárbara Rocha disse...

link erradoooo

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial