Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}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;
}Você pode colocar a imagem como background e depois substituir o arquivo com o hover, alterando o arquivo do background
>
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
>
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/
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