Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to Make a Download Button!
PowerCoder (456)

This will be a simple and useful tutorial on how to add download buttons.

In your HTML file make an anchor tag:


Then, add the content you want to download in the href attribute:

<a href="test.png">Download</a>

Lastly, to add a name to the file that the user is going to download, add the name in the download attribute:

<a href="test.png" download="Test-file">Download</a>

Now, if you click on our download button, it should download the file.

Coder100 (2075)

This will work only sometimes
This is purely due to browser behavior.
Nice tutorial btw!

PowerCoder (456)

@Coder100 I didn't know that 🤔. And thank you 😀!

theworldoflucks (1)

This was really useful thanks!

techgeek680 (3)

@PowerCoder I just registered today, and I had a FaceTime call with my friend. Now I know a little bit more.

techgeek680 (3)

@PowerCoder how did you make the screen black?

PowerCoder (456)

@techgeek680 Cool! In my style.css file, I added this piece of code:

body {
    background-color:rgb(99, 99, 99);

To add a different background to your website background, just change background-color to a different color.


body {
ChezCoder (1206)

the download attribute can be blank:
<a href="test.png" download>Download</a>

DannyIsCoding (418)

Woah.... so cool! :)

PowerCoder (456)

@DannyIsCoding Thank you! I'm glad you enjoyed it :D!

lurking11 (0)

it didn't work for me , using chrome on manjaro linux distro
anyway well done.

PowerCoder (456)

@lurking11 Hmmm... weird it works for me.

Anyways, thanks you.


it doesn't work