botoes de redes sociais

[deckards2bibi 1]

bom gente vi em varios sites aqles botoes que encaminha você para uma pagina do site X em determinada rede social

queria saber como fazer um botao daquel pegando algum efeito

alguem sabe como fazer :?

 

assim eu conseguir fazer so que

eu gostaria que ele trocasse a cor tbem pois coloquei em preto e branco

dai quando passasse o mouse em cima mudasse pra cor original

bom

 

oque eu fiz foi

criar um imagem com link em html

pra pega alguns efeitos segue o codigo

 

html

<ul>
<li><a href="http://www.google.com.br"><img src="images/facebookpb.png" width="30" height="30" /></a></li>
</ul>

 

css

#rede{
position:absolute;
float:left;
width:300px;
height:40px;
top:138px;
right:30px;
}

#rede ul{
list-style-type:none;
}

#rede ul li{
float:left;
display:inline;
margin:-19px 0 0 0;
padding:0 5px 0 5px;
}

#rede ul li a{
opacity:0.5;	
}
#rede ul li a:hover{
opacity:1;	
-moz-transition: opacity 0.5s ease-in 0s;
-webkit-transition: opacity 0.5s ease-in 0s;
transition: opacity 0.5s ease-in 0s;
}

[deckards2bibi 1]

sim alguem teria alguma solução para ir mudando para a cor original pois a imagen que esta é preta e branca

quaria quando passesse o mouse ficaria da cor original

[marcelo2605 10]

Você pode colocar a imagem como background e depois substituir o arquivo com o hover, alterando o arquivo do background

[deckards2bibi 1]

Você pode colocar a imagem como background e depois substituir o arquivo com o hover, alterando o arquivo do background

 

 

mas como ela vai servi de link ?

um exemplo legal é esse do baixaki

la no rodape deles tem um campo conheça nossos sites

onde eles fazem isso que eu quero aprender

 

Clique aqui

[Júlio Santos 3]

Você pode colocar a imagem como background e depois substituir o arquivo com o hover, alterando o arquivo do background

 

O Marcelo já respondeu sua dúvida. Vou te dar um pouco mais de detalhes, vamos lá. Crie em uma única imagem os dois estados do seu link. Por exemplo: se sua imagem tem 20 x 20px, crie uma imagem com 20 x 40px, onde nos primeiros 20x20 você vai colocar a imagem original (a preta no caso) e na parte de baixo, nos outros 20x20 você coloca a mesma imagem só que colorida.

 

No seu css, basta fazer isso:

 

#botao {background:url("imagem.jpg") left top no-repeat;display:block;height:20px;width:20px;}
#botao:hover {background-position:left bottom;}

 

Essa técnica de usar duas imagens em uma só chama CSS Sprites. Saiba mais aqui oh: http://tableless.com.br/css-sprites/