Learn to Code via Tutorials on Repl.it!

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

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 (2747)

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

PowerCoder (547)

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

JacksonPhilips (45)

Very helpful! :+1:

Edit: I keep forgetting I can't use emojis like that in Repl.it markdown smh

PowerCoder (547)

@danilobarros
Obrigado (eu literalmente usei o Google Translate para isso)

TheMemeManHimse (31)

@PowerCoder lol é isso que eu faço para qualquer idioma que eu não conheço (e eu falo inglês btw)

PowerCoder (547)

@TheMemeManHimse Oh. Está bem. Basta falar inglês nesta plataforma. Infelizmente, ninguém sabe português aqui.

TheMemeManHimse (31)

@PowerCoder Ech maachen normalerweis: D lol awer um ok dann op d'mannst erausfannen

theworldoflucks (3)

This was really useful thanks!

techgeek680 (65)

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

techgeek680 (65)

@PowerCoder how did you make the screen black?

PowerCoder (547)

@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 (1458)

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

DannyIsCoding (484)

Woah.... so cool! :)

PowerCoder (547)

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

[deleted]

cool!

lurking11 (3)

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

PowerCoder (547)

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


Anyways, thanks you.

[deleted]

it doesn't work