Content

• Steps
• Method 1 of 2: Create a HTML Button
• Method 2 of 2: Create a button as a picture
• Warnings

A download button will help your site look a lot more professional than simply linking to download. A button provides a cleaner interface, and if you design something yourself, your buttons can become an integral part of the page design. Follow this tutorial to create a HTML button or your own custom button.

Steps

Method 1 of 2: Create a HTML Button

1. 1 Create a button in the source editor. A simple text editor like Notepad or TextEdit is fine. In a text editor, enter the following code:
2. 2 Upload the file to your server. If you want to offer a file for download, you either have to store it on your server or associate the button with some file somewhere else on the network. Use an FTP client to upload the file you want to make available to your site server.
3. 3 Make sure you have webmaster rights if you want to link to a file that is not stored by you.
4. 4Replace 'Download Location' with your real download URL. Be sure to enclose the address in single quotes and “window.location =’ Download Location ”in double quotes. Add prefixes, such as HTTP: // or FTP: //, and add file extensions, such as .webp or .EXE..
5. 5 Write on the button. Replace “Button Text” with the words you want to appear on the button. Be sure to include text in double quotes. Try to keep your phrase short so that the on-screen button doesn't seem unwieldy.
6. 6 Place the source code on your page. You can paste the source code for the button anywhere on the page and the button will appear in that exact place. Upload your new page code and test your new button.

Method 2 of 2: Create a button as a picture

1. 1 Draw your download button. Use any image editor you like and draw a button that matches the style of your site. You can make the button as big (or small) as you like.
2. 2 Upload the file and the image with the button to your server. If you want to offer a file for download, you either have to store it on your server or associate the button with some file somewhere else on the network. Use an FTP client to upload the file you want to make available to your site server.
   • Upload the button image to the same location on the server where the page where you add this button is located.
3. 3 Write the source code for download. The download button, rendered as an image, works the same way as all other links in HTML.Copy the following code into your editor:
4. 4 Enter the file and image information. Replace “Download Location” with a real download URL, including any HTTP: // or FTP: // prefixes. Replace “Image File” with the file name of the button image. If the file is located on the server in the same place as the page, you do not need to specify the full path.
   • Replace “Hover Text” with the text that should appear when the user hovers over the button image.
   • Replace “X” and “Y” with the width and height of the image in pixels, respectively.
   • Be sure to add all of these entries in double quotes.
5. 5 Enter the source code on your page. Place the code where the button should appear. Upload new code and then open your webpage to see if the button works. Check that the hint text appears on hover and that the picture itself is the correct size.

Warnings

• Never upload files in violation of copyright laws, as this can result in a heavy fine or even jail time.
• It is much better to upload files to your own server and share them later than to depend on other sites on which they are stored. If you copy a link to a file location from another site, the download button you create will only work as long as the link remains valid. You will have to periodically check the functionality of the button or link on the site from which you took it to make sure that users will be able to download the file when they click on the button, and will not click on the broken link due to the fact that the file no longer exists.