How to Make a Download Button in HTML

A rather simple but often overlooked attribute in HTML anchor elements is the download attribute. Simply add it to an anchor if you want to download the resource instead of opening it in a new tab. No special script or anything else is needed. Take the following as an example:

<!-- Download with default file name -->
<a href="/assets/img/placeholder.png" download>
    📥 Download with default name
</a>

<!-- Download with custom file name -->
<a href="/assets/img/placeholder.png" download="webtips.png">
    📥 Download with custom name
</a>

When we click on the anchor, it'll download the file that is provided in the href attribute. In the first example, it'll download the file as is, using its original filename.

In the second example, we provided a custom value to the download attribute. In this way, we can specify an alternative filename. You can test the above code using the links below to see how the file is downloaded.

• 📥 Download with default name
• 📥 Download with custom name

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Styling the Download Button#

Since we need to use an anchor element and not an actual button to create the download functionality in HTML, we'll end up with a regular link. To make it appear as a button, we'll need to extend the example with some CSS. The following code shows the minimum amount of CSS we need to turn the appearance of an anchor into a button:

<a href="/file.png" class="download" download>Download</a>

<style>
    .download {
        background: #E44D26;
        padding: 10px;
        border-radius: 2px;
        color: #FFF;
        text-decoration: none;
    }

    .download:hover {
        background: #f85c35;
    }
</style>

The important parts are between the style tags. Note that we have an additional attribute on the anchor element. The .download class ensures we only style anchors as download buttons that have this class name. We have the following CSS styles that contribute to the overall look:

• background: Sets the background color of the element to an orange shade.
• padding: Sets some extra space around the text to make the element more prominent.
• border-radius: We can give the button a rounded appearance using the border-radius property.
• color: With the new background, we need to change the text color to provide sufficient color contrast. This property changes the text color of the button to white.
• text-decoration: By default, anchors come with underlined text. To get rid of it, we can set the text-decoration property to none.

We also have a background rule for the .download:hover selector. This will be triggered when the button is hovered over. It's important to provide visual feedback to users when they interact with interactive elements. Combining the download attribute with the above CSS rules will generate the following button:

In conclusion, creating a download button in HTML is a simple yet effective way to provide users with easy access to downloadable content. When using the download attribute, only specify a value when you need a custom file name. Otherwise, only specify the attribute.

If you'd like to learn more about downloading files in web applications, be sure to check out the following related tutorials:

How to Download Any File In JavaScript

Downloading programmatically generated and CDN hosted files

Ferenc Almasi • 2024 February 01 • 5 min read

How to Make an Animated Progress Bar in CSS

With the power of CSS transitions

Ferenc Almasi • 2021 November 11 • 10 min read