A download button can make your website look significantly more professional than simply offering a link download. A button provides a cleaner interface, and if you feel like designing your own, it can be an integral part of your page design. Follow this guide to create HTML buttons or make one following your design.
Steps
Method 1 of 2: Create an HTML Button
Step 1. Create the button in a code editor
A simple text editor like Notepad or TextEdit will work just fine. Enter the following code in the editor:
Step 2. Upload the file to the server
If you wish to offer a file for download, you will need to host it on your server or have the button link to the file saved elsewhere on the web. Use an FTP client to upload the file you want to make available.
Step 3. Make sure you have webmaster permission if you want to link to a file you don't host yourself
Step 4. Replace 'Download Location' with the URL for the download. Be sure to include single quotes around the address, as well as double quotes "window.location = 'Download Location'". Include any prefixes like HTTP: // or FTP: / / and also the file extension like *-j.webp" />
Step 5. Put the label on the button
Replace "Button Text" with the words you want to appear on the button. Make sure you keep double quotes around the text. Keep the button text small so the button doesn't appear large and cluttered on the page.
Step 6. Enter the code on your page
You can insert the button code anywhere in the body of your web page and the button will appear in that position. Upload the code you changed and test your new button.
Method 2 of 2: Create an Image Button
Step 1. Design your download button
Use your favorite 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 want.
Step 2. Upload the file to the server and the image button
If you want to offer a file for download, you will need to host it on your server or have the button point to the file saved elsewhere on the web. Use an FTP client to upload the file you want to make available to your site's server.
Upload the button image to the same server location as the page you are placing it on
Step 3. Create the 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 favorite editor:
Step 4. Enter your file and image information. Replace "Download Location" with the full URL for the download, including the HTTP: // or FTP: / / prefixes. Replace "Image File" with the file name for the download button image. If the file is in the same location as the page on the server, you don't need to include the full address.
- Replace "Hover Text" with any text you want to appear when the user hovers the cursor over the image.
- Replace "X" and "Y" with the height and width of the image in pixels.
- Make sure you keep double quotes around each entry.
Step 5. Enter the code on your page
Enter the code where you want your button to appear. Upload the new code and then upload the webpage to make sure the button works. Check that the hover text loads and that the image is the right size.
Warnings
- Uploading the file to a server is the best way to share files online, rather than depending on other websites for hosting. If you copy a link location from another site, the download button you create only works as long as the link path is active. It is a good idea to periodically check the download button or link to make sure that users are able to download the file when they click the button, instead of going to a broken link where the file no longer exists.
- Never upload files in violation of copyright laws, as it could lead to heavy fines or imprisonment.
