botoes de redes sociais

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;
}