How to Make a Button Download a File in HTML

Web designers often use button forms embedded into HTML documents for their functional flexibility and aesthetic benefits. Besides offering a visually pleasing way of allowing users to submit information or make decisions, buttons also allow different functionality based on user interaction. Different actions occur when a user clicks, double clicks, or hovers the cursor over the button. In this article, an HTML button will direct the user to a downloadable file on a user's click.

...
Buttons are useful and flexible interactive forms in HTML.

Step

Create the HTML file in a text editor (such as Notepad). The basic file should contain at least the HTML tags and the body tags:

Step

Step

Step

Step

The "button" tag contains the information describing the button. In this case, the button is of generic type "button" and has the name "Download." The words between the tags will appear on the button when viewed in the browser.

Step

Direct the button to the file when it is clicked by a user. Do this by adding an on-click event:

Step

Step

The "onClick" event executes when the user clicks the button. In this case, it directs the browser to open a new window pointed to the location of the file.

Step

Save the file and open it in the web browser. Save the file as an ".html" file (such as "test.html"). Open it in the browser. The button should appear in the upper left corner of the window. Clicking on the button will direct the user to the file and begin the download process.