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:

<a>Download</a>

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.

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

Example:

body {
    background-color:blue;
}
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.

[deleted]

it doesn't work