How to Create a Download Button

Verlise

Editor

posted on 14 years ago — updated on 1 second ago

11
views

A download button can make your website look significantly more professional than simply offering your download through links. A button provides a cleaner interface, and if you feel like designing your own, your buttons can be integral parts of your page’s design. Follow this guide to create HTML buttons or make a button of your own design.

Steps

Creating an HTML Button

Create the button in a code editor. A simple text editor such as Notepad or TextEdit will work perfectly. Enter the following code into the editor:

Upload the file to your server. If you want to offer a file to download, you will either need to host it on your own server or point the button to the file somewhere else on the web. Use an FTP client to upload the file that you want to make available to your website’s server.

Make sure that you have the permission of the webmaster if you want to link to a file that you are not hosting yourself.

Replace 'Download Location' with the URL to the download. Make sure to include the single quotes around the address, as well as the double quotes around “window.location='Download Location'". Include any prefixes such as HTTP:// or FTP:// and also include the file extension such as .JPG or .EXE.

Label the button. Replace “Button Text” with the words that you want to appear on the button. Make sure to keep the double quotes around the text. Keep the button text small so that the button doesn’t appear large and unwieldy on the page.

Place the code in your page. You can insert the button code anywhere into the body of your webpage, and the button will appear at that location. Upload your changed webpage code, and test your new button.

Creating an Image Button

Design your download button. Use your preferred image editor, and create a button that matches the style of your website. You can make the button as small or as large as you would like.

Upload the file to your server and the button image. If you want to offer a file to download, you will either need to host it on your own server or point the button to the file somewhere else on the web. Use an FTP client to upload the file that you want to make available to your website’s server. Upload the button image to the same location on the server as the page that you are putting it in.

Create your download code. A download button represented by an image works the same way that all other links work in HTML. Copy the following code into your preferred editor:

Enter in your file and image information. Replace “Download Location” with the full URL to your download, including any HTTP:// or FTP:// prefixes. Replace “Image File with the filename for the download button image. If the file is in the same location as the page on your server, you do not need to include the whole address. Replace “Hover Text” with any text that you want to appear when the user hovers the cursor over the image. Replace “X” and “Y” with the image width and height respectively in pixels. Make sure to keep the double quotes around each entry.

Enter the code into your page. Place the code where you want your button to appear. Upload the new code, and then load the webpage to ensure that the button works. Check that the hover text loads and that the picture is the right size.