[HTML] How to create download button?

[Yorak]

Hey everyone. I know very little about HTML, and am curious how to create a download button out of a .psd? It has a regular button with a hover effect and a click effect. I had a logo thread here and the member submitted this to me. I don't know how hard/involved it is to create something like that to post in my regular WordPress blog. The download button .psd is here if somebody would be so kind as to help me out or at least tell me how to do it. I have found HTML code for making hover effects on lists, etc. - but not images/buttons.

[Seahorsepip Veteran]

Cut out every state of the psd(normal/hover/pressed)

Then use the following most simple html code I can think of:

<a class="download" "href="link to file to download"></a>[/CODE]

Then use the following css:

[CODE]
.download {
height: ***px;
width: ***px;
background: url('normal.png');
}
.download:hover {
background: url('hover.png');
}
.download:active {
background: url('active.png');
}
[/CODE]

I suggest hiring someone to do the coding of the website if you can't write a download button :p

[Yorak]

  On 18/03/2012 at 16:10, Seahorsepip said:

I suggest hiring someone to do the coding of the website if you can't write a download button :p

Lol! Yeah I know, right? I split the files and linked the main button to the file it was to download, but wasn't sure what to do with the CSS. Thanks!

[primexx]

Instead of spliting the files I'd put the three states in the same file like this http://i.imgur.com/9X9AJ.png

that way your button doesn't go blank when you hover/cilck it for a moment while the new image downloads, since all three states were downloaded already at the very beginning as part of the same picture

then in your CSS just switch the position of the picture around with background-position

e.g.

#button {
width:206px;
height:63px;
background:url("./image.png");
}
#button:hover {
background-position:0 -63px;
}
#button:active {
background-position:0 -126px;
}
[/CODE]

[Yorak]

  On 18/03/2012 at 20:57, primexx said:

Instead of spliting the files I'd put the three states in the same file like this http://i.imgur.com/9X9AJ.png

that way your button doesn't go blank when you hover/cilck it for a moment while the new image downloads, since all three states were downloaded already at the very beginning as part of the same picture

then in your CSS just switch the position of the picture around with background-position

e.g.

#button {
width:206px;
height:63px;
background:url("./image.png");
}
#button:hover {
background-position:0 -63px;
}
#button:active {
background-position:0 -126px;
}
[/CODE]

Thank you very much, works great. :)

[Seahorsepip Veteran]

  On 18/03/2012 at 20:57, primexx said:

Instead of spliting the files I'd put the three states in the same file like this http://i.imgur.com/9X9AJ.png

I'd even write the button is css but I wanted to keep it as easy as possible :p