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:

Button, Download HTML Link Example

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>
.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

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview