How to create a download HTML link?

To create a Download HTML link, you have to add the “download” attribute to the opening <a> tag. It will force the browser to download the file instead of opening it. See the following example for more clarification:

<a href="path/to/your/file.docx" download>Download File</a>

That means if you put the “download” attribute within the opening <a> tag, it will force the browser to download the file.

If you want to rename the downloaded file, use the following code:

<a href="path/to/your/file.pdf" download="different_name_than_actual_file">Download File</a>

This will change the file name on your visitor’s device. You don’t need to mention the file extension.

If you want the browser to open a new window for downloading, simply use the target=”_blank” attribute.

Not to mention, you can write CSS to stylize it such as removing the underline, hover effect, border, background, etc. Following CSS is an example for the download link:

a {
    text-decoration: none;
    color: #FFFFFF;
    background: #FF9800;
    padding: 20px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border: 2px solid #ed8e02;
    border-radius: 4pc;
    transition: all 0.8s ease-out;
}

a:hover {
    background: #c27504;
    border: 2px solid #FF9800;
}

You can give it (a-tag) a class name and then apply the CSS accordingly. Otherwise, all other <a> tags will be affected by this CSS.

However, with the CSS in place, the download button will look like the below screenshot:

And if you need to center align the download link, wrap the link (a-tag) within a <div> and align the text to center for it. See the code sample below for clarification:

<div class="download-button-wrapper">
  <a href="path/to/your/file.pdf" download="different_name_than_actual_file">Download File</a>
</div>

.download-button-wrapper {
    text-align: center;
}

Okay, let me know if you still have any questions about the HTML download link or if it’s working.

Learn more about HTML links

• How to add a link in HTML?
• How to open a link in a new tab in HTML?
• How to create an HTML download link?
• What is the difference between a link & button?
• How to create an HTML button that works like a link?
• How to make a div clickable link?
• How to create HTML anchor links that jump to another section?
• How to create an HTML mailto link (including email subject)?
• How to center a link in HTML & CSS?
• How to deactivate links using CSS?
• How to remove the underline from a link?

Build HTML CSS projects