Question

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.

Link to comment
https://www.neowin.net/forum/topic/1064858-html-how-to-create-download-button/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

  • 0
  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!

  • 0

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]

  • Like 2
  • 0
  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. :)

  • 0
  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

This topic is now closed to further replies.
  • Posts

    • Display Driver Uninstaller (DDU) 18.1.2.3 by Razvan Serea Display Driver Uninstaller (DDU) is a utility for completely removing AMD/NVIDIA/INTEL graphics drivers and related packages from your system, attempting to eliminate all leftovers (including registry entries, folders and files, driver store). Though AMD/NVIDIA/INTEL drivers can usually be removed via the Windows Control Panel, this uninstaller tool was created for situations where standard uninstall fails, or when you need to fully remove NVIDIA or ATI graphics card drivers. After using this driver cleaner, your system will behave as though it’s the first time you’re installing a new driver—similar to a fresh Windows installation. As with all such tools, we recommend creating a restore point beforehand, allowing you to undo changes if issues arise. If you're having trouble installing an older or newer driver, try it—there are reports that it resolves such problems. Recommended usage: The tool can be used in Normal mode but for absolute stability when using DDU, Safemode is always the best. Make a backup or a system restore (but it should normally be pretty safe). It is best to exclude the DDU folder completely from any security software to avoid issues. You do NOT need to uninstall the driver prior using DDU. Requirements: .NET Framework 4.8 Compatible with Windows 7, 8, 8.1, 10, and 11 (32-bit or 64-bit) Note: Using on Insider Preview builds is at your own risk. Display Driver Uninstaller (DDU) 18.1.2.3 changelog: All GPUs: Fixed hardware rescan issue when cleaning all GPUs without restarting or shutting down UI: Added Guru3D mention in the About section. General: Various fixes and enhancements. Download: Display Driver Uninstaller (DDU) 18.1.2.3 | 1.7 MB (Freeware) Download: DDU Portable | 1.2 MB Links: Display Driver Uninstaller Home Page | Screenshot | Forum Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • That would be nice, if excel could refresh pivot tables without bugs. Frequently you refresh a pivot and all parameters get lost. Now this will happen automatically. Bravo MS!
    • If one could ever put all the crap of the world in one box, that would be Microsoft.
    • The most corrupt and vile CEO any company ever had ! The only company that makes an insane amount of money decade after decade but doesn't deliver on even barely passable quality to customers, screws over partners and treats employees like trash
  • Recent Achievements

    • Week One Done
      Homayoun Hotak earned a badge
      Week One Done
    • Dedicated
      Profit earned a badge
      Dedicated
    • One Month Later
      hhgygy earned a badge
      One Month Later
    • Week One Done
      hhgygy earned a badge
      Week One Done
    • One Year In
      NIKI77 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      634
    2. 2
      ATLien_0
      237
    3. 3
      Xenon
      167
    4. 4
      neufuse
      146
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!