Guys and girls, I recently started started learning some web design on my spare time, mostly at w3schools. I've come across a problem. what I want to do is to create a button link, but I want it to change appearance as the mouse hovers over it. I know how to do this with just text, but with images, i'm a bit clueless. This is what I have done so far:
If you dont know what I mean, then go to threadless.com and look the "Join" button on the right. I have a feeling that I'm doing this completely wrong. Can anyone please tell how I can make an effect like that? Also, it would be helpful if someone can tell me how I can use a:link, a:visited, a:hover, and a:active with the id tag. Thanks!
EDIT: a better example is when you hover over the "Add Reply" button on this page.
Question
skiiper
Guys and girls, I recently started started learning some web design on my spare time, mostly at w3schools. I've come across a problem. what I want to do is to create a button link, but I want it to change appearance as the mouse hovers over it. I know how to do this with just text, but with images, i'm a bit clueless. This is what I have done so far:
HTML:
<a href="mainpage.htm" target="_blank"><img src="pic/button.png"></a>
CSS:
a:hover{background-image=a:hover{background-image:url(pic/hoverbutton.png)}
If you dont know what I mean, then go to threadless.com and look the "Join" button on the right. I have a feeling that I'm doing this completely wrong. Can anyone please tell how I can make an effect like that? Also, it would be helpful if someone can tell me how I can use a:link, a:visited, a:hover, and a:active with the id tag. Thanks!
EDIT: a better example is when you hover over the "Add Reply" button on this page.
Link to comment
Share on other sites
9 answers to this question
Recommended Posts