How to Make a Download Button in HTML

How to Make a Download Button in HTML

And how to style it with CSS
Ferenc Almasi β€’ Last updated 2024 February 15 β€’ Read time 3 min read

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:

Copied to clipboard! Playground
<!-- 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>
How to create download buttons in HTML

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.


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:

Copied to clipboard! Playground
<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>
How to style a download link as a button

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:

Use the checkboxes to toggle each style.

Download

Conclusion

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:

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.