How to Make a Button Download a File in HTML

By G.S. Jackson

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.

Things You'll Need

  • Text editor
  • Web browser

Step 1

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: 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 2

Direct the button to the file when it is clicked by a user. Do this by adding an on-click event: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 3

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.